css3中animation属性 CSS3 animation-direction 属性

css3中animation属性

CSS3中的animation属性是一种强大的工具，可以让我们创建动画效果。它可以让我们在不使用Flash或JavaScript的情况下，创建出复杂的动画效果。

animation属性有很多参数，这些参数可以帮助我们控制动画的行为。例如，我们可以使用animation-name来指定要使用的动画名称；animation-duration来控制动画所需要的时间；animation-delay来控制动画开始之前需要等待多长时间；animation-iteration-count来控制动画重复执行的次数；animation-direction来控制动画是否应该正向执行还是反向执行。

.example { 
    animation-name: example; 
    animation-duration: 5s; 
    animation-delay: 2s; 
    animation-iteration-count: infinite; 
    animation-direction: alternate; 
} 

CSS3 animation-direction 属性

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;
}

浏览器支持

属性
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 参考手册