如何使用 CSS 暂停播放动画？

在CSS中，我们可以使用 animation 属性来创建动画效果。通常情况下，动画会一直播放直到结束，但是有时候我们希望在特定的情况下暂停或者停止动画。那么该如何实现呢？

暂停动画

我们可以使用 animation-play-state 属性来控制动画的播放状态。此属性的值有两种：running 和 paused。默认值为 running。

语法

animation-play-state: running|paused|initial|inherit;

示例

.animation {
  animation: myAnimation 2s ease infinite;
}

.pause {
  animation-play-state: paused;
}

在上面的示例中，我们通过添加 pause 类来暂停动画的播放。当我们添加 pause 类时，元素的动画效果将被暂停。

停止动画

如果我们想要停止动画并清除所有动画效果，可以使用 animation 属性的 none 值。

示例

.stop {
  animation: none;
}

在上面的示例中，我们通过添加 stop 类来停止动画效果。当我们添加 stop 类时，元素的任何动态效果将停止并从元素中删除，包括其他属性（例如 animation-timing-function、animation-delay 等）。

结论

通过使用 animation-play-state 和 animation 属性，我们可以轻松地暂停和停止动画效果。这在特定的情况下非常有用，例如，当用户与元素进行交互时，我们可以暂停动画并在他们停止交互时重新启动它。

以上就是关于CSS暂停和停止动画效果的介绍，希望对您有所帮助！