css3.动画

@keyframes

Firefox 支持替代的 @-moz-keyframes 规则。

Opera 支持替代的 @-o-keyframes 规则。

Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。

写法：
@keyframes name{
from{}
to{}
}
或
@keyframes name{
0%{}
50%{}
100%{}
}

animation

所有动画属性的简写属性，除了 animation-play-state 属性。
顺序是name,duration,timing-function,delay,iteration-count。

animation-name

规定 @keyframes 动画的名称。

animation-duration

规定动画完成一个周期所花费的秒或毫秒。默认是 0。

animation-timing-function

规定动画的速度曲线。默认是 “ease”。
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

animation-delay

规定动画何时开始。默认是 0。

animation-iteration-count

规定动画被播放的次数。默认是 1，循环播放时infinite。

animation-direction

规定动画是否在下一周期逆向地播放。默认是 “normal”，逆向是alternate。

animation-play-state

规定动画是否正在运行或暂停。默认是 “running”，暂停是paused。

animation-fill-mode

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