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

Dear 丶 2022-09-02 14:58 280阅读 0赞

动画方向 | 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

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