css3动画

CSS3动画

在CSS3之前，动画都是由JaveScript动态改变元素样式属性来完成的，这种方式性能上存在一些问题。CSS3可以让动画变得更加容易，性 能也更好。
CSS3动画有三个动画样式属性
transform渐变动画
transition转变动画
animation自定义动画

transform
我们先看一下 transition 的属性：
1 property:填写需要变化的css属性如：width,line-height,font-size,color等,所有作用与dom样式的属性;
2 duration:完成过渡效果需要的时间单位(s或者ms)
3 timing-function:完成效果的速度曲线（linear,ease,ease-in,ease-out等等）
4 delay: 动画效果的延迟触发时间(单位ms或者s)

transform转变动画
transform属性
1 旋转(rotate)：主要分为2D旋转和3D旋转。rotate(angle)，2D 旋转，参数为角度，如45deg；rotate(x,y,z,angle)，3D旋转，围绕原地到(x,y,z)的直线进行3D旋转；rotateX(angle)，沿着X轴进行3D旋转；rotateY(angle)；rotateZ(angle)；

2 缩放(scale)：一般用于元素的大小收缩设定。主要类型同上，有scale(x, y)、scale3d(x, y, z)、scaleX(x)、scaleY(y)、scaleZ(z)，其中x、y、z为收缩比例。

3 倾斜(skew)：主要用于对元素的样式倾斜。skew(x-angle, y-angle)，沿着x和y轴的2D倾斜转换；skewX(angle)，沿着x轴的2D倾斜转换；skew(angle)，沿着y轴的2D倾斜转换。

4 移动(translate)：主要用于将元素移动。translate(x, y)，定义向x和y轴移动的像素点；translate(x, y, z)，定义像x、y、z轴移动的像素点；translateX(x)；translateY(y)；translateZ(z)。

animation自定义动画
animation属性：
1 name：需要绑定到选择器的keyframe名称。

2 duration：完成该动画需要花费的时间，秒或毫秒。

3 timing-function：跟transition-linear一样。

4 delay：设置动画在开始之前的延迟。

5 iteration-count：设置动画执行的次数，infinite为无限次循环。

6 direction：是否轮询反向播放动画。normal，默认值，动画应该正常播放；alternate，动画应该轮流反向播放。