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属性允许我们控制我们的动画播放方向。我们可以使用它来制作各种形式的动画，包括循环动画，往返动画等等。