重新想，重新看——CSS3变形，过渡与动画④

最后，我们来探讨一下CSS3的动画属性。

之前提到过，实际上过渡也算作动画的一种。但过渡作为动画的缺陷在于，只能使元素属性从一个值“过渡”至另一个值，但如果想要使元素的属性值根据需要在时间轴上不断变化，则必须使用到animation属性。

animation属性解决动画问题的思路也很简单，即通过制定关键帧的方式，"切割"时间，使浏览器一段一段的通过"过渡"完成属性值的变化。本质上来看，animation的实现效果实际上是多个transition过渡的叠加。

具体来说，animation的控制要点主要有以下两点：

1.制作关键帧并引用

（1）制作关键帧

关键帧属性的写法为@keyframes，用来制定一次动画中，不同阶段元素的属性变化。举例如下：

 @keyframes addWidth{　　　　
     from { 
 3             width: 200px;
     }
     50% {
             width: 500px;
     }
     to {
             width: 200px;
     }
 }

（2）引用关键帧

当需要使用此关键帧时，需要为元素添加这样一条声明：animation：addWidth，2s。像transition属性一样，关键帧名称和动画时间为动画属性的必须值。另外，对于animation而言，可以同时声明多个关键帧，只需将不同关键帧用逗号分隔即可。

2.对动画细节的设定

除了选择好完成动画需要的时间并设定好动画的执行效果之外，我们其实还需要对一次动画进行很多其他方面的操控，例如动画延迟，动画结束后是返回最初状态还是保留结尾状态，动画速率，中止动画等等。在CSS3中，这些控制需求可以通过动画属性下的8个子属性得到满足，下面进行一一介绍：

（1）animation-name 通过关键帧名称调用动画。

其值为已设定的关键帧名称或none，当设置为none时，会立即停止（覆盖）已经设置或正在进行的任何动画。

（2）animation-duration 设定动画的时长。

（3）animation-timing-funciton 主要用来设置动画播放方式，使用方式与transition相同。

（4）animation-delay 设定动画的延迟时间。

（5）animation-iteration-count 设定动画的播放次数，默认值为1，可以通过关键字infinite使动画无限循环播放，也可以写明具体数字控制动画的播放次数。

（6）animation-direction 设置动画的播放方向，其值有normal（默认）与alternate两个，第2个值使动画每次在奇数次时向反方向播放动画。

（7）animation-play-state 控制元素播放状态，值有running与paused两个，选择后者时会暂停动画播放，此时元素的样式将回到最原始设置状态。

（8）animation-fill-mode 这个子属性决定了动画结束后属性值应为初始状态还是结束状态，有四个值：none，forwards，backwards，both。

以上逐一解释了animation动画的八个子属性，通过这些子属性的运用，就可以很好的控制元素的动画效果。

最后，再谈一谈animation属性的浏览器兼容问题，和transform类似，IE10以下的浏览器不支持。