动画方向 | animation-direction

动画方向

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

/* Single animation */
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;

/* Multiple animations */
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;

/* Global values */
animation-direction: inherit;
animation-direction: initial;
animation-direction: unset;

使用速记属性animation一次性设置所有动画属性通常很方便。

Initial value	normal
Applies to	all elements, ::before and ::after pseudo-elements
Inherited	no
Media	visual
Computed value	as specified
Animation type	discrete
Canonical order	the unique non-ambiguous order defined by the formal grammar

语法

值

normal每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。alternate动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代reverse反向运行动画，每周期结束动画由尾到头运行。alternate-reverse反向交替，反向开始交替动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。

注：当您在animation-*属性中指定的动画。animation-name属性以不同的方式使用，具体取决于有多少。有关更多信息，请参见设置多个动画属性值...

形式语法

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

示例

有关示例，请参阅CSS动画。

规格

Specification	Status	Comment
CSS AnimationsThe definition of 'animation-direction' in that specification.	Working Draft	Initial definition.

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	(Yes)-webkit 43.0	(Yes)-webkit (Yes)	5.0 (5.0)-moz 16.0 (16.0)1	10	12-o 12.50	4.0-webkit
reverse	19	(Yes)	16.0 (16.0)	10	(Yes)	(Yes)
alternate-reverse	19	(Yes)	16.0 (16.0)	10	(Yes)	(Yes)

Feature	Android	Android Webview	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile	Chrome for Android
Basic support	?	?	(Yes)-webkit (Yes)	5.0 (5.0)-moz 16.0 (16.0)1	?	?	?	(Yes)-webkit 43.0
reverse	No support	?	(Yes)	16.0 (16.0)	?	?	No support	(Yes)-webkit
alternate-reverse	?	?	(Yes)	16.0 (16.0)	?	?	?	(Yes)-webkit