keyframe语法:
@keyframe 名称 {
0% {...}
10% {...}
50% {...}
...
}

注意：

1：如果不需要定义详细的关键帧，可以直接用from {} to{}代替N%

2：0% 如果省略，则:

3：100% 如果省略，则:

4：需要加厂商前缀: -webkit-,-o-,-ms-,-moz-

animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。

注意：

1：一般都使用简写方式

2：这里着重演示一下timing-function,iteration-count和direction

有很多内置的function可以供选择。
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
也可以通过 http://cubic-bezier.com/来生成贝塞尔曲线参数

注意：

1：timing-function和keyframe里的不同阶段属性定义，是协同工作的

2：有些效果只通过timing-func是无法完成的，比如bounce效果，得配合keyframe的参数定义

默认1。
infinite 无限循环。
n 循环n次

normal 默认值。动画应该正常播放。
alternate 动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。
reverse 动画反向播放。
alternate-reverse 综合了alternate和reverse。

注意：

1：iteration-count 必须大于1，这个属性才有效果

paused 规定动画已暂停。
running 规定动画正在播放。

注意：

1：可以通过切换这个状态，来实现在css层面暂停、继续动画的效果

none 不改变默认行为。
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both 向前和向后填充模式都被应用。

注意：

1：这个属性需要加厂商前缀

2：默认情况下，动画播放完，元素样式会还原

3：forwards情况下，动画播放完，元素样式会保留在最后一帧

4：backwards,如果没有delay,效果=none，加上delay之后，可以看出等待阶段，他已经应用了第一帧