CSS3 animation 动画属性 animation-direction 是一个动画方向的属性，该属性有4个值：normal | reverse | alternate | alternate-reverse，它们的运动方向是不同的，本文着重介绍它们的区别。

下图一目了然显示了 animation-direction 属性 normal | reverse | alternate | alternate-reverse 它们的运动方向不同之处。

animation-direction: normal;

动画向前播放。当它到达结尾时，它会从第一个关键帧重新开始。

animation-direction: reverse;

动画向后播放：从最后一个关键帧开始，在第一个关键帧结束。

animation-direction: alternate;

动画先向前播放，然后向后播放：

  • 从第一个关键帧开始
  • 停在最后一个关键帧
  • 重新开始，但在最后一个关键帧
  • 停在第一个关键帧

animation-direction: alternate-reverse;

动画首先向后播放，然后向前播放：

  • 从最后一个关键帧开始
  • 停在第一个关键帧
  • 重新开始，但在第一个关键帧
  • 停在最后一个关键帧

您可能对以下文章也感兴趣

  • 一图解释 animation-timing-function 6个属性值的区别
  • 一图了解animation-fill-mode: none|forwards|backwards|both各属性值
  • 【实例】详解 CSS3 animation 6个动画属性
  • 一图理解animation属性linear/ease/ease-in/ease-out/ease-in-out
  • 实例分析CSS3 transform: translateY() rotate() rotateY() rotateX()
  • CSS3 transform: scale() 缩放转换【实例分析演示】
  • 纯CSS实现的星光动画背景
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。