animation运用的是一个Keyframes(关键帧)的概念来制作动画，这个概念和flash里面的关键帧一样，每一关键帧一个状态，然后很多关键帧拼成了一个动画。关键帧使用percentage来指定动画发生的时间点。0%表示动画的第一时刻，100%表示动画的最终时刻。因为这两个时间点十分重要，所以还有特殊的别名：from和to。这两个都是可选的，若from/0%或to/100%未指定，则浏览器使用计算值开始或结束动画。也可包含额外可选的关键帧，描述动画开始和结束之间的状态。
语法规则如下：
animation-name
必须，定义了animation的动画名称
keyframes-selector
必须，定义阶段，0%或者from为开始，100%或者to为结束
css-styles
必须，每一关键帧的css样式
示例如下：
先来看看animation的兼容情况
可以看到，animation基本上被所有游览器支持了,接下来说一下animation的几个属性
一、animation-name
语法如下：
animation-name是用来定义一个动画的名称，其主要有两个值：IDENT是由Keyframes创建的动画名，换句话说此处的IDENT要和Keyframes中的IDENT一致，如果不一致,将不能实现任何动画效果；none为默认值，当值为none时，将没有任何动画效果。我们可以同时附几个animation给一个元素，我们只需要用逗号“，”隔开。
二、animation-duration：
语法如下：
animation-duration是用来指定元素播放动画所持续的时间长，取值:<time>为数值，单位为s（秒.）其默认值为“0”。这个属性跟transition中的transition-duration使用方法是一样的。
三、animation-timing-function
语法如下：
animation-timing-function是指元素根据时间的推进来改变属性值的变换速率，说得简单点就是动画的播放方式。他和transition中的transition-timing-function一样，具有以下六种变换方式：ease;ease-in;ease-in-out;linear;cubic-bezier。
四、animation-delay
语法如下：
animation-delay是用来指定元素动画开始时间。取值为<time>为数值，单位为s(秒)，其默认值也是0。这个属性和transition-delay使用方法是一样的。
五、animation-iteration-count
语法如下：
animation-iteration-count是用来指定元素播放动画的循环次数，其可以取值<number>为数字，其默认值为“1”；infinite为无限次数循环。
六、animation-direction
语法如下：
animation-direction是用来指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。
七、animation-play-state
语法如下：
animation-play-state主要是用来控制元素动画的播放状态。其主要有两个值，running和paused,其中running为默认值。他们的作用就类似于我们的音乐播放器一样，可以通过paused将正在播放的动画停下了，也可以通过running将暂停的动画重新播放，我们这里的重新播放不一定是从元素动画的开始播放，而是从你暂停的那个位置开始播放。另外如果暂时了动画的播放，元素的样式将回到最原始设置状态。这个属性目前很少内核支持，所以只是稍微提一下。
查看DEMO
参考资料：
w3cplus CSS3 Animation
w3schools CSS3 Animations