[分享]css单数次反向播放动画

在CSS中，我们可以使用“animationdirection”属性来控制动画的播放方向。其中，该属性的默认值为“normal”，表示动画正向播放。如果想要动画反向播放，我们只需要将该属性的值设置为“...

在CSS中，我们可以使用“animation-direction”属性来控制动画的播放方向。其中，该属性的默认值为“normal”，表示动画正向播放。如果想要动画反向播放，我们只需要将该属性的值设置为“reverse”即可。

.example {
  animation-name: bounce;
  animation-duration: 2s;
  animation-direction: reverse;
}

@keyframes bounce {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, -50%, 0);
  }
} 

上述代码中，我们定义了一个名为“bounce”的动画，它会使元素向上弹跳并停止在原始位置上。在使用“animation-direction”属性时，我们将其值设置为“reverse”，这样元素就会反向弹跳回到原始位置。

如果需要让动画循环播放，我们可以使用“animation-iteration-count”属性并将其设置为“infinite”。另外，我们还可以使用“animation-timing-function”属性来设置动画的时间函数，从而实现不同的播放效果。