animation 动画

语法

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

animation-name：指定要绑定到选择器的关键帧的名称

animation-duration：动画指定需要多少秒或毫秒完成

animation-timing-function：设置动画将如何完成一个周期

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

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

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

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

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

具体值说明：

animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。您能够在该函数中使用自己的值，也可以预定义的值：

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

animation-iteration-count：n|infinite;

n定义动画播放次数的数值；infinite：规定动画应该无限次播放。

animation-direction: normal|alternate;

normal	默认值。动画应该正常播放。
alternate	动画应该轮流反向播放。

animation-play-state: paused|running;

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

Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。

Safari 和 Chrome 支持替代的 -webkit-animation 属性。

注释：IE 9 以及更早的版本不支持 animation 属性。