这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
概述
animation-direction CSS 属性指示动画是否反向播放，它通常在简写属性animation中设定
| 初始值 | normal |
|---|---|
| 适用元素 | all elements, ::before and ::after pseudo-elements |
| 是否是继承属性 | 否 |
| 适用媒体 | visual |
| 计算值 | as specified |
| Animation type | discrete |
| 正规顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
Formal syntax: <single-animation-direction>#where
<single-animation-direction> = normal | reverse | alternate | alternate-reverse
animation-direction: normal animation-direction: reverse animation-direction: alternate animation-direction: alternate-reverse animation-direction: normal, reverse animation-direction: alternate, reverse, normal
值
normal每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。alternate动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代reverse- 反向运行动画，每周期结束动画由尾到头运行。
alternate-reverse反向交替， 反向开始交替- 动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。
例子
See CSS animations for examples.
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Animations animation-direction |
Working Draft | For the two new values, see the W3C discussion. |
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | (Yes)-webkit | 5.0 (5.0)-moz 16.0 (16.0) |
10 | 12-o 12.10 # |
4.0-webkit |
reverse |
19 | 16.0 (16.0) | 10 | 未实现 | 未实现 |
alternate-reverse |
19 | 16.0 (16.0) | 10 | 未实现 | 未实现 |
| Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | ? | (Yes)-webkit | 5.0 (5.0)-moz 16.0 (16.0) |
? | ? | ? |
reverse |
未实现 | (Yes)-webkit | 16.0 (16.0) | ? | ? | 未实现 |
alternate-reverse |
? | (Yes)-webkit | 16.0 (16.0) | ? | ? | ? |