目录

CSS animation-direction 属性

❮上一节完整的CSS参考下一节❯

示例

先向前播放动画，然后向后播放：

div {
animation-direction: alternate;
}

亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个animation-direction属性定义动画是否应向前、向后或交替循环播放。

默认值：	普通的
遗传：	不
可动画：	不。阅读可动画的
版本：	CSS3
JavaScript 语法：	对象.style.animationDirection="reverse"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

后跟 -webkit-、-moz- 或 -o- 的数字指定使用前缀的第一个版本。

Property
animation-direction	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

CSS 语法

animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;

属性值

Value	Description	Demo
normal	Default value. The animation is played as normal (forwards)	Play it »
reverse	The animation is played in reverse direction (backwards)	Play it »
alternate	The animation is played forwards first, then backwards	Play it »
alternate-reverse	The animation is played backwards first, then forwards	Play it »
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

更多示例

示例

先向后播放动画，然后向前播放：

div {
animation-direction: alternate-reverse;
}

亲自试一试 »

示例

向后播放动画：

div {
animation-direction: reverse;
}

亲自试一试 »

相关页面

CSS教程：CSS 动画

HTML DOM 参考：动画方向属性

❮上一节完整的CSS参考下一节❯