animation

语法：

animation：<single-animation>[,<single-animation>]*

<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>

默认值：看每个独立属性

适用于：所有元素，包含伪对象:after和:before

继承性：无

动画性：否

计算值：看每个独立属性

媒体：视觉

取值：

<' animation-name '>：
检索或设置对象所应用的动画名称
<' animation-duration '>：
检索或设置对象动画的持续时间
<' animation-timing-function '>：
检索或设置对象动画的过渡类型
<' animation-delay '>：
检索或设置对象动画延迟的时间
<' animation-iteration-count '>：
检索或设置对象动画的循环次数
<' animation-direction '>：
检索或设置对象动画在循环中是否反向运动
<' animation-fill-mode '>：
检索或设置对象动画时间之外的状态
<' animation-play-state '>：
检索或设置对象动画的状态。w3c正考虑是否将该属性移除，因为动画的状态可以通过其它的方式实现，比如重设样式

说明：

复合属性。检索或设置对象所应用的动画特效。
  • 如果提供多组属性值，以逗号进行分隔。
  • 注意：如果只提供一个<time>参数，则为 <' animation-duration '> 的值定义；如果提供二个<time>参数，则第一个为 <' animation-duration '> 的值定义，第二个为 <' animation-delay '> 的值定义
  • 对应的脚本特性为animation。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE Edge Firefox Chrome Safari Opera iOS
Safari		 Android
Browser		 Blackberry
Browser		 Opera
Mobile		 Chrome
for
Android		 Firefox
for
Android		 IE
Mobile		 UC
Browser
for
Android		 Samsung
Internet		 QQ
Browser		 Baidu
Browser
5.5-9 12+ 2-4 4-42 -webkit- 3.1-3.2 9-11.6 3.2-5.1 -webkit- #1 2.1-3 -webkit- #1 7-10 -webkit- 10-12 61 56 10+ 11.4 -webkit- 4+ 1.2 -webkit- 7.12
10+ 5-15 -moz- 43+ 4-5 -webkit- #2 12 -o- 6.0-8.4 -webkit- 4-4.4.4 -webkit- 12.1+
16+ 5.1-8 -webkit- 12.1 9.0+
9+ 15-29 -webkit-
30+
  1. 在一些场景中会有错误行为
  2. 部分浏览器不支持伪元素动画，或者支持得不够好，尽可能不要利用伪元素来做动画
  3. 通过selectivizr，可以免去css3前缀。本页下方的示例已使用此方案。

示例：