animation-direction

介绍

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

标准化语法

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

样例：

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

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

与 Web 的区别

注意

• animation仅支持对transform, background-color, opacity做动画

扩展阅读

• animation
• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state

注意事项

• 如果是动态设置的动画属性，需要在节点标记 flatten="false" 属性
• 如果 iOS 显示效果不符合预期，在节点标记 implicit-animation="false" 属性