反向的css动画,动画方向 | animation-direction

动画方向 | 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属性以不同的方式使用，具体取决于有多少。有关更多信息，请参见设置多个动画属性值...

形式语法

#where

= 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