animation-direction

语法：

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

<single-animation-direction> = normal | reverse | alternate | alternate-reverse

默认值：normal

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

继承性：无

动画性：否

计算值：指定值

媒体：视觉

取值：

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

说明：

检索或设置对象动画在循环中是否反向运动
  • 如果提供多个属性值，以逗号进行分隔。
  • 对应的脚本特性为animationDirection。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
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前缀。本页下方的示例已使用此方案。

示例：