animation-direction
Experimental: 这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
概述
语法
Formal syntax:<single-animation-direction>#where
<single-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
- 反向交替, 反向开始交替
- 动画第一次运行时是反向的,然后下一次是正向,后面依次循环。决定奇数次或偶数次的计数从1开始。
例子
See CSS animations for examples.
Specifications
Specification | Status | Comment |
---|---|---|
CSS Animations Level 1 animation-direction |
Working Draft | For the two new values, see the W3C discussion. |
浏览器兼容性
BCD tables only load in the browser