CSS3 animation-direction 属性
CSS3 animation-direction 属性
CSS3 animation-direction 属性定义了动画播放方向。在这篇文档中,我们将介绍这个属性的语法、值的含义和用法。
语法
animation-direction 属性可以在 CSS 动画中使用,其语法如下:
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
默认值为 normal
。
属性值
normal
动画按照正常的时间线顺序播放。这是默认值。
reverse
动画按照倒序时间线播放。也就是说,它将反向播放动画。
alternate
动画先正向播放,然后反向播放。也就是说,它在正向和反向之间交替播放动画。
alternate-reverse
动画先倒放播放,然后正向播放。也就是说,它在正向和反向之间交替播放动画,但是倒放是首先播放的。
initial
设置这个属性将把它设置为默认值。
inherit
从父元素继承这个属性。
用法
使用 CSS3 animation-direction 属性,我们可以控制动画的方向,这对于展示交互式Web项目非常有用。
下面是一个使用动画方向的例子:
div {
width: 50px;
height: 50px;
background-color: blue;
position: relative;
-webkit-animation-name: animate;
animation-name: animate;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@-webkit-keyframes animate {
from {left: 0px;}
to {left: 200px;}
}
@keyframes animate {
from {left: 0px;}
to {left: 200px;}
}
在这个例子中,我们使用了 animation-direction
属性将我们的动画方向设置为 alternate
。这意味着我们的动画会在正向和反向之间交替播放,如下所示:
总结
CSS3 animation-direction属性允许我们控制我们的动画播放方向。我们可以使用它来制作各种形式的动画,包括循环动画,往返动画等等。