刚看完一节慕课网的css动画，在此总结下
1. 先说下 transform、transition、translate的区别
transform 和 transition是css的2个属性，translate属于transform里的一个方法；
2.语法：
transform有4个方法，分别是translate平移、rotate旋转、scale缩放、skew斜切
transition有4个值（默认是前2个值）：property(指定css属性的name)、duration（动画持续时间）、timing-function(切换动画的速度)、delay(动画执行前的延迟时间)
3. 用法:
- translate有2个参数，代表x轴和y轴, 只有1个参数时，只在x轴移动，y轴默认是0；transform: translate(10px,10px)
-ms-transform:translate(x,y); /*IE9*/
-moz-transform:translate(x,y); /*Firefox*/
-webkit-transform:translate(x,y); /*Safari和chrome*/
-o-transform:translate(x,y); /*Opera*/
- rotate(1800deg)参数值为正数顺时针旋转，值为负数逆时针旋转； transform:rotate(90deg)
- transform-origin:0 0 ; 设置旋转的中心点 ，默认是（0,0）
- scale(x,y) x轴和y轴缩放，第二个参数没有默认取第一个参数的值，scale(0.5)参数值小于1缩小，scale(1.5)参数值大于1放大； transform:scale(1.2)
- skew(x,y) 斜切 用法和rotate类似，在x轴和y轴同时进行角度扭曲，第二个参数没有时默认为0，不进行斜切； transform: skew(90deg,10deg)
skew一般不建议使用，可以用 skewX(值) 和 skewY(值) ，但是skew(x,y)的效果不等于skewX加上skewY的效果。
skewX(xdeg), 表示在x轴倾斜的度数，如果度数为正，表示元素沿水平方向（X轴）顺时针倾斜；如果度数为负，表示元素沿水平方向（X轴）逆时针倾斜
skewY(ydeg)类似
这个属性不太好理解，总结一下就是
（1）skewX()方法会保持高度，沿着X轴倾斜；
（2）skewY()方法会保持宽度，沿着Y轴倾斜；
（3）skew(x,y)方法会先按照skewX()方法倾斜，然后按照skewY()方法倾斜；
- transition-property: none| all | property ; all表示所有属性都有过渡效果，property定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔
- transition-duration: time值；默认是0 没有动画效果，以秒或者毫秒计
- transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
/* transition: width|height|opacity|all 2s ease-in 2s ; property和duration是必须值，后2个参数可以省略*/