css3动画属性详解及用法

下面是一些经常用到的动画属性：

1. animation-name:指定要绑定关键帧（动画）的名字
2. animation-duration:指定动画多少毫秒或秒完成
3. animation-timing-function:设置动画将如何完成（动画的速度）一个周期
4. animation-delay:设置动画开始时的延迟时间
5. animation-iteration-count:定义动画的播放次数
6. animation-fill-mode:规定动画不播放时的样式
7. animation-play-state:指定动画是否正在运行或停止

接下来对一些属性值的设置做些详细的解释:

• 设置动画在2s完成

animation-duration:2s;

• 设置动画从开始到结束形同的速度

animation-timing-function:linear; 默认值为：ease

linear –从头到尾速度相同
ease –默认值，以慢速开始，然后加快，在结束前变慢
ease-in –以低速开始
ease-out –以低速结束
ease-in-out –以低速开始和结束

• 设置动画延迟2s开始

animation-delay:2s;

• 设置动画播放3次

animation-iteration-count:3; 默认值为1

infinite -- 无限次

• 把物体动画从一个地方移到另一个地方并停留在那里

animation-fill-mode:forwards

none –默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
backwards –动画结束后停留在开始时的样式
both –遵循forwards和backwards的规则，动画会在两个方向上扩展属性

• 暂停动画

animation-play-state:paused;

running – 指定正在运行的动画，默认值
paused – 指定暂停动画