animation是css3的另一个重要的模块，它成型比transition晚，吸取了Flash的关键帧的理念，实用性高。
animation是一个复合样式，它可以细分为8个更细的样式。
（1）animation-name
为@keyframes动画（以@keyframes开头的样式规则，我们称为关键帧样式规则）规定名称。默认为none，规定无动画效果。
（2）animation-duration
动画持续的时间，单位为s或ms。默认为0，规定没有动画效果。
（3）animation-timing-function
缓动公式，默认为ease。
（4）animation-delay
动画延迟多久，才开始执行。默认为0.
（5）animation-iteration-count
动画播放的次数，值可以为正整数或infinite（无限次播放）。默认只执行一次。这是一个很好的设计，不像transition，只要改变指定样式值，就会触发transition的动画执行。
（6）animation-direction
动画执行的方向，有4个值：normal，alternate，reverse，alternate-reverse。默认值为normal。normal就是动画正常播放，也就是说从第一帧（@keyframes中0%或from定义的样式，不写，浏览器会自动补上）开始播放。alternate，代表动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后往前播放。显然这个值在animation-iteration-count大于1时才有效。reverse和alternate-reverse在最早制定的规范中没有，因此有兼容性问题，这里不讲。
（7）animation-fill-mode
此属性规定动画在播放之前或之后，其动画效果是否可见（也就是说规定动画时间之外的状态）。默认值为none。其属性值是由逗号分隔的一个或多个填充模式关键词。
none ：不改变默认行为。默认行为是不设置对象动画之外的状态。
forwards： 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards： 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both： 向前和向后填充模式都被应用。也就是说上面两个状态都设置。
这4个值的设置效果，大家可以去看一下这个例子：http://www.w3chtml.com/css3/properties/animation/animation-fill-mode.html。none和backwards的状态是一样的，forwards和both的状态是一样的。
（8）animation-play-state
用于暂停或继续此动画。默认值：running。
paused 规定动画已暂停。
running 规定动画正在播放。
您可以在 JavaScript 中使用该属性，这样就能在播放过程中暂停动画。
前面6个可以连写在一起。比如：animation:name 2s ease 3s infinite alternate
我们来举个例子说下animation如何使用的：
<style>
#test{
width:100px;height:100px;background:red;
-webkit-animation: cicle 1s infinite alternate;
animation: cicle 1s infinite alternate;
}
@keyframes circle {
100%{
border-radius:50px;
}
}
@-webkit-keyframes circle {
100%{
-webkit-border-radius:50px; //设置test元素的四个角，为椭圆（当值为width的一半时，就会变成圆）。
}
}
</style>
上面的这个例子，会将test元素不断的从一个正方形变成一个圆形，然后圆形再变成正方形，周而复始，可见用css3实现一个动画是如此的方便。
此外，animation还配套了3种事件，分别用于开始时（animationstart），结束时（animationend），重复播放时（animationiteration）。当然这些事件名不能直接使用，需要加上私有前缀。那如何来获取这个名字呢？其实跟transition理念一样。
var getAnimationEventName = function(){
var obj = {
"AnimationEvent":"animationend",
"WebKitAnimationEvent":"webkitAnimationEnd"
};
...... //下面跟transition那一课的代码一样
}
下一课，将使用css3 animation做一个动画引擎。使用css3做动画引擎，在移动端很有优势，但是在pc端，因为animation在IE10才支持，所以就不能使用css3 animation，这时我们就需要退回基于javascript的动画引擎。下一课难度很大，请做好准备。
加油！