动画方向 | 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 | no |
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属性以不同的方式使用，具体取决于有多少。有关更多信息，请参见设置多个动画属性值...
形式语法
<single-animation-direction>#where
<single-animation-direction> = normal | reverse | alternate | alternate-reverse示例
有关示例，请参阅CSS动画。
规格
Specification | Status | Comment |
|---|---|---|
CSS AnimationsThe definition of 'animation-direction' in that specification. | Working Draft | Initial definition. |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
Basic support | (Yes)-webkit 43.0 | (Yes)-webkit (Yes) | 5.0 (5.0)-moz 16.0 (16.0)1 | 10 | 12-o 12.50 | 4.0-webkit |
reverse | 19 | (Yes) | 16.0 (16.0) | 10 | (Yes) | (Yes) |
alternate-reverse | 19 | (Yes) | 16.0 (16.0) | 10 | (Yes) | (Yes) |
Feature | Android | Android Webview | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|---|
Basic support | ? | ? | (Yes)-webkit (Yes) | 5.0 (5.0)-moz 16.0 (16.0)1 | ? | ? | ? | (Yes)-webkit 43.0 |
reverse | No support | ? | (Yes) | 16.0 (16.0) | ? | ? | No support | (Yes)-webkit |
alternate-reverse | ? | ? | (Yes) | 16.0 (16.0) | ? | ? | ? | (Yes)-webkit |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
