CSS参考手册
动画和转换 | Animations & Transitions
动画方向 | animation-direction
animation-direction
CSS 属性指示动画是否反向播放,它通常在简写属性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 |
动画和转换 | Animations & Transitions相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。