css3动画

css3动画有三个模块，它们分别是：Transform、Transition和Animations。其中transform是对网页对象进行变形操作，transition实现css属性过度变化，animation实现css样式分步式关键帧动画演示效果。

transform:
在2D平面的变形
属性值：

1. transformlate（x，y）x：在x轴移动的距离。 y：在y轴移动的距离。 正值：向右向下 负值:向左向上
   单独方向上设置：transformlateX()、transformY()
2. rotate（）旋转，默认情况绕着中心点旋转，单位为度数（deg。）顺时针为正值，逆时针为负值
3. scale（x，y）x：在x轴的缩放比列。 y：在y轴的缩放比列。 （0~0.9999····）为缩小，大于1为放大
4. skew（）倾斜 单位为也是度数（deg）。

在3D平面的变形
属性值:

1. transformlate（x，y，z）x：在x轴移动的距离。 y：在y轴移动的距离。 z：在z轴移动的距离。（z轴垂直于屏幕的方向） 正值：向右向下 负值:向左向上 单独方向上设置：transformlateX()、transformY()
2. rotate（）旋转，默认情况绕着中心点旋转，单位为度数（deg）。顺时针为正值，逆时针为负值
3. scale（x，y，z）x：在x轴的缩放比列。 y：在y轴的缩放比列。 z：在z轴的缩放比列。 （0~0.9999····）为缩小，大于1为放大
4. skew（）倾斜 单位为也是度数（deg）。
   注：设置3D变形时，一定要设置transform-style：preserve-3d；搭建3d的空间，一般在父元素里添加。

transition
css3过渡属性
transition：参数1 参数2 参数3 参数4；

1. transition-property：检索或设置对象中参与过渡的元素 默认为all，能支持过度的所有属性都会过渡。
2. transition-duration：检索或设置对象过渡的持续时间。 s 秒 ms 毫秒
3. transition-delay：检索或设置对象的延迟时间。 s 秒 ms 毫秒
4. transition-timing-function：检索或设置对象过渡的动画类型。 匀速（linear）、匀加速、匀减速、贝塞尔曲线 默认情况下为先加速后减速。
   注：transition必须通过鼠标事件触发。

animation
动画，不需要事件触发，调用关键帧即可
制定关键帧：@keyframes 关键帧名称{
0%{ 开始状态
}
25%{
}
…
100%{ 结束状态
}
}
animation：复合属性

1. animation-name：关键帧名称
2. animation-duration：动画持续时间
3. animation-timing-function：动画运动类型 linear ease ease-in step-start：没有动画的中间过度效果，每次直接跳到下一帧开始的地方。（逐帧动画）
4. animation-delay：动画的延迟
5. animation-iteration-count：运动次数（默认一次）infinite 无限循环
6. animatin-direction：运动的方向 reverse：反方向 alternate：先正常运动在反方向 alternate-reverse：先反方向在正常运动。
7. animation-play-state：运动状态 paused：暂停 running：运动 此属性需要拆分出来单独使用效果更佳。