animation-direction - CSS（层叠样式表） 编辑

这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

概述

animation-direction CSS 属性指示动画是否反向播放，它通常在简写属性animation中设定

初始值	normal
适用元素	all elements, ::before and ::after pseudo-elements
是否是继承属性	否
计算值	as specified
Animation type	discrete

语法

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.

浏览器兼容性

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

更多

• Using CSS animations
• AnimationEvent