CSS animation-direction 属性
下面有更多实例。
定义和用法
animation-direction 属性定义是否应该轮流反向播放动画。
如果 animation-direction 值是 "alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。
注释： 如果把动画设置为只播放一次，则该属性没有效果。
| 默认值: | normal |
|---|---|
| 继承性: | no |
| 支持动画: | no. 阅读有关动画的信息 |
| 版本: | CSS3 |
| JavaScript 语法: | object.style.animationDirection="reverse" 测试一下 |
浏览器支持
表中的数字表示支持该属性的第一个浏览器版本。
紧跟在 -webkit-, -moz- 或 -o- 前的数字为支持该前缀属性的第一个浏览器版本号。
| 属性 | |||||
|---|---|---|---|---|---|
| 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- |
语法
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
属性值
| 值 | 描述 | 试一试 |
|---|---|---|
| normal | 默认值。动画按正常播放。 | 亲自试一试 » |
| reverse | 动画反向播放。 | 亲自试一试 » |
| alternate | 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 | 亲自试一试 » |
| alternate-reverse | 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。 | 亲自试一试 » |
| initial | 将此属性设置为其默认值。请参阅 initial | |
| inherit | 从其父元素继承此属性。请参阅 inherit |
更多实例
相关页面
CSS 教程: CSS 动画
HTML DOM 参考手册: animationDirection 属性
