css3中的animation

CSS3的Animation有八个属性：
animation-name
运动的名称（规定需要绑定的keyframe 名称）

animation-duration
运动时间

animation-delay
运动延迟时间

animation-iteration-count
规定动画播放的次数（infinite表示无限次播放）

animation-direction
规定是否应该轮流反向播放动画。
（normal正常播放，默认值；
alternate：轮流反向播放；）

animation-play-state
规定动画正在运行还是暂停。
（paused：规定动画已暂停；
running：规定动画正在播放。）

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

animation-timing-function
规定动画的速度曲线
（linear：匀速；
ease：低速开始，加速，结束前变慢；
ease-in：加速；
ease-out：减速；
ease-in-out：低速开始和结束；
cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值）。

用css3的animation完成一个动画，当只有这个动画完成时才执行另一个事件。有两种方法：
一、设置定时器：
设定一个和动画时长一样的time，过time事件去执行这个函数。
setTimeout(function(){ },time);
二、当-webkit-animation动画结束时有一个webkitAnimationEnd事件，只要监听这个事件就可以了。
不同浏览器的AnimationEnd写法 (webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend)
例子：
-webkit-animation动画其实有三个事件：
开始事件 webkitAnimationStart
结束事件 webkitAnimationEnd
重复运动事件 webkitAnimationIteration
代码如下：