还可以参考这篇：http://www.cnblogs.com/shenfangfang/p/5713564.html
（一）
keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{...}”，括号中就是一些不同时间段样式规则。
@keyframes changecolor{
0%{
background: red;
}
100%{
background: green;
}
}
在一个“@keyframes”中的样式规则可以由多个百分比构成的，如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。
经验与技巧：在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。
（二）调用动画
animation-name属性主要是用来调用@keyframes定义好的动画。需要特别注意：animation-name调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果。
语法：
animation-name:none | IDENT；
1.IDENT是由@keyframes创建的动画名，上面已经讲过了（animation-name调用的动画名需要和“@keyframes”定义的动画名称完全一致）；
2.none为默认值，当值为none时，将没有任何动画效果，这可以用于覆盖任何动画。
注意：需要在Chrome和Safari上面的基础上加上-webkit-前缀，Firefox加上-moz-
（三）设置动画播放时间
animation-duration主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。单位：S秒
语法规则
animation-duration:<time>[,<time>]*
取值<time>为数值，单位为秒，其默认值为“0”，这意味着动画周期为"0",也就是没有动画效果（负值被视为“0”）。
（三）设置动画播放方式
animation-timing-function属性主要用来设置动画播放方式。主要让元素根据时间的推进来改变属性值的变换速率，简单点说就是动画的播放方式。
语法规则：
animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>,<number>,<number>,<number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>,<number>,<number>,<number>)]*
animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。您能够在该函数中使用自己的值，也可以预定义的值：
在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
（四）设置动画开始播放的时间
animation-delay属性用来定义动画开始播放的时间，用来触发动画播放的时间点。和transition-delay属性一样，用于定义在浏览器开始执行动画之前等待的时间。
语法规则：
animation-delay:[,]*
（五）设置动画播放次数
animation-iteration-count属性主要用来定义动画的播放次数。语法规则
语法规则：
animation-iteration-count:infinite | <number>[,infinite | <number>]*
1.其值通常为整数，但也可以使用带有小数的数字，其默认值为1，这意味着动画将从开始到结束只播放一次。
2.如果取值为infinite，动画将会无限次播放。
（六）设置动画播放方向
animation-direction属性主要用来设置动画播放方向，其语法规则如下：
animation-direction:normal | alternate[,normal | alternate]*
其主要有两个值：normal,alternate
1.normal是默认值，如果设置为normal时，动画的每次循环都是向前播放。
2.另一个值是alternate，他的作用是，动画播放在第偶数次按逆序播放，第奇数次正常播放。
（七）设置动画的播放状态
animate-play-state属性主要用来控制元素动画的播放状态
参数：
主要有两个值：running和paused
其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外，如果元素动画结束后，元素的样式将回到最原始设置状态。
（八）设置动画时间外属性
animation-fill-mode属性定义在动画开始之前和结束之后发生测操作。主要具有四个属性值：none、forwards、backwords和both.其四个属性值对于效果如下：
在默认情况之下，动画不会影响它的关键帧之外的属性，使用animation-fill-mode属性可以修改动画的默认行为。简单的说就是告诉动画在第一关键帧上等待动画开始，或者在动画结束时停在最后一个关键帧上而不回到动画的第一帧上。或者同时具有这两个效果。
none（默认，回到动画没开始时的状态。）
forwards（动画结束后动画停留在结束状态）
backwords（动画回到第一帧的状态）
both（根据animation-direction轮流应用forwards和backwards规则）。
