animation、transition和transform动画属性详解

关于上篇博文介绍回流和重绘，我们知道了应该尽量减少回流，或是重绘代替回流来达到优化的效果。优化中又不可避免地涉及到了animation动画属性造成页面加载延迟等相关的问题，于是专门写了这么一篇博文来介绍css3中的动画属性。
css中的与动画相关的属性一共有三：
　　animation、transition和transform属性。其中animation属性和transition属性能够实现动画效果， transform属性描述了元素静态样式（2D和3D变换），于是transform属性经常配合animation属性和transition属性使用。
　　
1.transform（变换）属性描述的是元素静态样式
　　transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。 必须是鼠标移上或者点击执行属性变化，鼠标离开属性回归。说到底就是属性不会变化。配合transition: 0.3s;（-webkit-transition: 0.3s;）才会有动画的效果，否则会很生硬。
　　其中可能会用到css里的角度单位：
　　deg——度数，一个圆共360度，IE9+
　　grad——梯度，一个圆共400梯度，IE9+
　　rad——弧度，一个圆共2n弧度，IE9+
　　turn——转、圈，一个圆共1转，IE＋ FireFox13.0+

属性值	作用
translate	对象进行2D空间或3D空间的位移。注：使用translate时需要注意位移量的百分比是相对元素自身宽高来计算的。
translate(x,y)	2D位移。第一个参数为必须，是x轴上的位移量；第二个参数可不设置默认为0，是y轴上的位移量
translateX()	指定x轴位移量
translateY()	指定y轴位移量
translate3D(x,y,z)	3D位移。第一个参数指定X轴的位移量, 第二个参数指定Y轴的位移量, 第三个参数指定Z轴的位移量, 3个参数缺一不可
translateZ()	指定z轴的位移量
rotate	对象进行2D空间或3D空间旋转。常与 transform-origin 一起使用。注：rotate值为正值时，顺时针旋转；否则逆时针旋转。在2D情况下，rotate()只能指定一个参数；在3D情况下，rotate3D()必须指定四个参数，否则将报错。
rotate()	2D旋转。根据指定的旋转角度进行旋转
rotate3D()	3D旋转，必须指定四个参数，前3个参数分别表示旋转的方向x y z, 第4个参数表示旋转的角度
rotateX()	指定X轴的旋转角度
rotateY()	指定Y轴的旋转角度
rotateZ()	指定Z轴的旋转角度
scale	对象进行2D空间或3D空间缩放。常与 transform-origin 一起使用。注：参数值为倍数，大于1表示放大；0～1之间为缩小；1表示不变；0的时候元素不可见。参数值为负数时，除了元素的方向发生改变[x轴反转]，其他规律与正值一致。
scale(m,n)	第一个参数指定X轴的缩放倍数[必须], 第二个参数指定Y轴的缩放倍数[当不设置时, 默认取第一个参数的值]
scaleX()	指定X轴的缩放倍数
scaleY()	指定Y轴的缩放倍数
scale3D()	第一个参数指定X轴的缩放倍数, 第二个参数指定Y轴的缩放倍数, 第三个参数指定Z轴的缩放倍数, 3个参数缺一不可
scaleZ()	指定Z轴的缩放倍数
skew	对象进行2D空间斜切。常与 transform-origin 一起使用。注：若是在使用斜切时内容正常，则使用伪元素，将斜切背景应用在伪元素上。
skew(x,y)	第一个参数对应X轴[必须], 第二个参数对应Y轴[当不设置时, 默认为0]
skewX()	指定X轴的斜切
skewY()	指定Y轴的斜切

表中常常出现transform-origin属性，transform-origin 属性允许您改变被转换元素的位置，且该属性必须与 transform 属性一同使用。transform-origin: x-axis y-axis z-axis;其中的x-axis y-axis z-axis定义视图被置于 X 轴、Y轴、Z轴的何处。

2.animation（动画）属性实现动画效果
　　animation 属性是一个简写属性，用于设置六个动画属性：

属性值	作用
name	动画名称
duration	动画执行时间
timing-function	速度曲线
delay	动画延迟时间
iteration-count	播放次数
direction	是否反向播放

animation的使用必须结合@keyframes animation-name使用
　　@keyframes move{
　　 　form{ left:0px;} to{ left:200px;}
　　 }
　　 在需要动画的元素上面添加动画 div{animation:move 5s infinite;}
　　 animation可以设定每一帧的样式和时间
　　
　　
3.transition（过渡）属性实现动画效果
　　transition 属性是一个简写属性，用于设置四个过渡属性：

属性值	作用
property	过渡的属性
duration	完成过度效果需要时间
timing-function	速度曲线
delay	延迟时间

transition定义了动画的属性、时间、速度曲线以及延迟时间 ；通常和hover等事件配合使用，由事件触发。
　　
transition和animation比较：
　　1. 触发条件不同。transition通常和hover等事件配合使用，由事件触发。animation则立即播放。
　　2. 循环。 animation可以设定循环次数。
　　3. 精确性。 animation可以设定每一帧的样式和时间。tranistion 只能设定头尾。 animation中可以设置每一帧需要单独变化的样式属性， transition中所有样式属性都要一起变化。
　　4. 与javascript的交互。animation与js的交互不是很紧密。transition经常跟JS搭配，让js改动属性，从而触发transition的操作。
　　5.极端条件下，animation占用的资源相应的比transition多，所以如果能用transition实现，就尽量用transition来实现，如果追求复杂更自由的动画，就可以用animation。
　　6.在transition动画的每一帧中，浏览器都要做下relayout和repaint，然后将位图发送给GPU。之前我们提到了，加载位图到GPU内存中是很慢的。transform属性并不会触发当前元素或附近元素的relayout。浏览器将当前元素视为一个整体，它会缩放、旋转、移动这一整个元素。在使用 aniamtion 的时候这样就可以改变很多属性，像我们改变了 width、height、postion 等等这些改变文档流的属性的时候就会引起，页面的回流和重绘，对性能影响就比较大，但是我们用 transition 的时候一般会结合 tansfrom 来进行旋转和缩放等不会生成新的位图，当然也就不会引起页面的重排了。