CSS3 animation-direction 属性

由 胖大叔 创建，小路依依 最后一次修改 2016-07-22 CSS 参考手册定义和用法 animation-direction：属性控制如何在reverse或alternate周期播放动画。 如果 animation-direction 值是 "alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。 注释：如果把动画设置为只播放一次，则该属性没有效果。 默认值： normal 继承性： no 版本： CSS3 JavaScript 语法： object.style.animationDirection="alternate" 语法animation-direction: normal|reverse|alternate|alternate-reverse; 值 描述 测试 normal 以正常的方式播放动画 测试 reverse 以相反方向播放动画   alternate 播放动画作为正常每奇数时间（1,3,5等）和反方向每偶数时间（2,4,6，等...） 测试 alternate-reverse 在每个奇数时间（1,3,5等）在相反方向上播放动画，并且在每个偶数时间（2,4,6等等）的正常方向上播放动画   实例 实例 暂停动画： div { animation-direction:alternate; -webkit-animation-direction:alternate; /* Safari 和 Chrome */ } 尝试一下 ? 浏览器支持 属性 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- Internet Explorer 10、Firefox 以及 Opera 支持 animation-direction 属性。 Safari 和 Chrome 支持替代的 -webkit-animation-direction 属性。 注释：Internet Explorer 9 以及更早的版本不支持 animation-direction 属性。 相关页面 CSS3 教程：CSS3 动画 CSS 参考手册