animation-direction

概述

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

• 初始值 normal
• 适用元素 all elements, ::before and ::after pseudo-elements
• 可继承 no
• 适用媒体 visual
• 计算值 as specified
• 可动画 否
• Canonical order the unique non-ambiguous order defined by the formal grammar

语法

Formal syntax:  <single-animation-direction>#

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

反向交替， 反向开始交替

The animation plays backward on the first play-through, then forward on the next, then continues to alternate. The count to determinate if it is an even or an odd iteration starts at one.

例子

See CSS animations for examples.

Specifications

Browser compatibility

See also

• Using CSS animations
• AnimationEvent
• Animation-related CSS properties and at-rules: animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timing-function, @keyframes