CSS Animation

语法：animation: name duration timing-function delay iteration-count direction;

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。
animation-fill-mode	规定动画在执行时间之外应用的值。
animation-play-state	规定动画是正在运行还是暂停。

animation-timing-function

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

animation-direction

值	描述
normal	默认值。动画应该正常播放。每次动画循环时，动画将重置为起始状态并重新开始。
reverse	动画在每个循环中反向播放。换句话说，每次动画循环时，动画将重置为结束状态并重新开始。
alternate	动画在每个循环中正反交替播放。第一次迭代是正向播放。第二次反向…。（正-反）
alternate-reverse	动画在每个循环中正反交替播放，第一次迭代是反向播放。（反-正）

animation-fill-mode

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

animation-play-state

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