#animation-direction

#介绍

animation-direction 属性指示动画是否反向播放。

#使用示例

css-apisrc/animation-direction/App.tsx

预览

#语法

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

动画第一次运行时是反向的，然后下一次是正向，后面依次循环。

#形式定义

#形式语法

/*默认值normal*/
animation-direction: normal | reverse | alternate | alternate-reverse;

#扩展阅读

• animation
• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state
• CSS 动画事件
• Animated API

#兼容性

LCD tables only load in the browser