css3 animation

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation-duration 动画需要多少秒或者毫秒完成

可以为1000ms也可以为1s

animation-timing-function 动画如何完成一个周期

linear:动画从头到尾的速度是相同
ease:低速-加快-结束前变慢
ease-in:动画以低速开始
ease-out:动画以快速开始
ease-in-out:动画以低速开始和结束

animation-delay 设置动画在启动前的延迟间隔

animation-delay:2s;:2秒之后再开始动画

animation-iteration-count 定义动画的播放次数

infinite 无限次播放 或者直接写数字 （1，2，3）

animation-direction 指定是否应该轮流反向播放动画

normal:默认值，正常播放。
reverse:动画反向播放。
alternate:动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
alternate-reverse:动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
initial:设置该属性为它的默认值。
inherit:从父元素继承该属性

animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式

none:默认值。动画在动画执行之前和之后不会应用任何样式到目标元素
forwards:在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
backwards:动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）。
both:动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。
initial:设置该属性为它的默认值。
inherit: 从父元素继承该属性。

animation-play-state 指定动画是否正在运行或已暂停。

paused:暂停动画
running:指定正在运行的动画