css动画设置倒序

在CSS动画中，我们可以使用 @keyframes 规则来创建动画序列。默认情况下，CSS动画会按照正常的时间顺序播放。不过，有时候我们也需要设置倒序播放动画序列，下面简单介绍一下如何实现这一功能。

针对倒序播放动画序列，我们可以通过改变动画 animation-direction 属性来实现。默认情况下，该属性值是 normal，表示从第一帧向最后一帧递增播放。如果我们想让动画序列倒序播放，只需要将 animation-direction 设置为 reverse 即可。

/* 正常播放动画序列 */
.example {
  animation-name: my-animation;
  animation-duration: 2s;
  animation-direction: normal;
}

/* 倒序播放动画序列 */
.example {
  animation-name: my-animation;
  animation-duration: 2s;
  animation-direction: reverse;
}

除了 reverse 属性值外，还有 alternate 属性值可以设置动画序列倒序播放。当 animation-direction 的值为 alternate 时，动画序列会循环播放，并且每次都会反向播放，即正向 > 反向 > 正向 > 反向...循环播放。

/* 循环播放动画序列，正向和反向循环 */
.example {
  animation-name: my-animation;
  animation-duration: 2s;
  animation-direction: alternate;
}

这样，我们就可以利用 CSS 的 animation-direction 属性设置动画序列的播放方向，实现倒序播放需要的动画效果了。