CSS3 animation-direction 属性

animation-direction 属性指定动画播放时是否反向播放或交替播放。

语法

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

• normal: 默认值，动画正常播放。
• reverse: 动画反向播放。
• alternate: 动画交替播放，正向播放后反向播放，循环往复。
• alternate-reverse: 动画反向交替播放，反向播放后正向播放，循环往复。

示例

// www.javascriptcn.com code example
/* 正常播放 */
.example1 {
  animation-direction: normal;
}

/* 反向播放 */
.example2 {
  animation-direction: reverse;
}

/* 交替播放 */
.example3 {
  animation-direction: alternate;
}

/* 反向交替播放 */
.example4 {
  animation-direction: alternate-reverse;
}

注意事项

• animation-direction 只影响动画播放的方向，不会改变动画的时间轴或速度。
• 结合 animation-iteration-count 属性可以控制动画的播放次数和方向。