Style animationDirection 属性

在 CSS3 中，animationDirection 属性用于指定动画播放时的方向。这个属性可以控制动画是正向播放还是反向播放，以及是否交替播放动画。在本文中，我们将深入探讨animationDirection属性的用法和示例。

语法

animationDirection 属性的语法如下：

animation-direction: normal | reverse | alternate | alternate-reverse;

• normal：默认值，动画正向播放。
• reverse：动画反向播放。
• alternate：动画交替正向和反向播放。
• alternate-reverse：动画交替反向和正向播放。

用法示例

正向播放

// www.javascriptcn.com code example
.box {
  animation-name: slide;
  animation-duration: 2s;
  animation-direction: normal;
}

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

反向播放

// www.javascriptcn.com code example
.box {
  animation-name: slide;
  animation-duration: 2s;
  animation-direction: reverse;
}

@keyframes slide {
  from {
    transform: translateX(100px);
  }
  to {
    transform: translateX(0);
  }
}

交替播放

// www.javascriptcn.com code example
.box {
  animation-name: slide;
  animation-duration: 2s;
  animation-direction: alternate;
}

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

交替反向播放

// www.javascriptcn.com code example
.box {
  animation-name: slide;
  animation-duration: 2s;
  animation-direction: alternate-reverse;
}

@keyframes slide {
  from {
    transform: translateX(100px);
  }
  to {
    transform: translateX(0);
  }
}

注意事项

• animation-direction 属性可以与 animation 缩写属性一起使用。
• 当与 animation-iteration-count 属性一起使用时，alternate 和 alternate-reverse 值会导致每次动画迭代时交替播放正向和反向动画。

结论

通过本文的学习，我们了解了animationDirection属性的用法和示例。这个属性可以帮助我们控制动画的播放方向，使动画效果更加生动和多样化。在实际项目中，我们可以根据需求灵活运用animationDirection属性，为页面添加更加丰富的动画效果。