文章转载至：

语法：

animation：[,]*

<single-animation> = || || || || || ||

取值：

名称	作用
	检索或设置对象所应用的动画名称
	检索或设置对象动画的持续时间
	检索或设置对象动画的过渡类型
	检索或设置对象动画延迟的时间
	检索或设置对象动画的循环次数
	检索或设置对象动画在循环中是否反向运动
	检索或设置对象动画时间之外的状态
	检索或设置对象动画的状态。w3c正考虑是否将该属性移除，因为动画的状态可以通过其它的方式实现，比如重设样式

兼容性：　　

例：

动画无法单独实现，需要借助关键帧(keyframes)实现

@keyframes(关键帧)作为CSS3动画的一部分，其该紧跟一个标识符(由开发者自定)，此标识符将在其他CSS代码中引用。在@keyframes和标识符之后，就是一系列的动画规则(就像普通的CSS代码中声明的style规则)了。这一系列动画规则用大括号括起来隔开，然后再嵌在@keyframes之后的大括号里，类似其他@语法规则。

以下面的代码为例，前缀(the vendor prefixes)webkit表示这个动画效果只适用于webkit内核的浏览器，labelON就是这个动画里面关键帧的名字(animation-name)。0%和100%表示这个动画从开始到结束。而系统会自动将开始和结束进行过度动画

上述代码演示

 

 

 

属性的值：

animation-timing-function（过渡属性）

值	名称	备注
linear	线性过渡	等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease	平滑过渡	等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in	由慢到快	等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out	由快到慢	等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out	由慢到快再到慢	等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start		等同于 steps(1, start)
step-end		等同于 steps(1, end)
steps(<integer>[, [ start | end ] ]?)		接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
cubic-bezier(<number>, <number>, <number>, <number>)		特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

 

animation-direction（反向运动）

值	作用
normal	正常方向
reverse	反方向运行
alternate	动画先正常运行再反方向运行，并持续交替运行
alternate-reverse	动画先反运行再正方向运行，并持续交替运行

animation-iteration-count（循环次数）

值	作用
infinite	无限循环
<number>	指定对象动画的具体循环次数