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

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

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

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

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

1.制作关键帧并引用

　　（1）制作关键帧

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

 1 @keyframes addWidth{　　　　//@keyframes标明这是一个关键帧 addWidth为关键帧的名称（必须），如果关键帧没有名称或未被调用，则关键帧的存在没有意义。
 2     from {　　　　　　　　　　//指动画开始阶段时元素需要动画属性的属性值，form可以写作0%，百分号不可省略。
 3             width: 200px; 
 4     }
 5     50% {　　　　　　　　　　 //这里表示在整个动画时间的中间时段，元素指定动画属性的属性值。
 6             width: 500px;
 7     }
 8     to {　　　　　　　　　　　//指动画结束阶段时元素需要动画属性的属性值，to可以写作100%，同样，百分号不可省略。
 9             width: 200px;
10     }
11 }

　　（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以下的浏览器不支持。

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

原文：http://www.cnblogs.com/libinfs/p/5297086.html