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

CSS 动画在网页设计中起到了重要的作用，但是有时候我们也需要暂停或播放动画。幸运的是，CSS 提供了多种方式来实现这个目的。

方法一：使用 animation-play-state 属性

animation-play-state 属性可以控制元素的动画状态。通过将其设置为 paused，可以暂停动画；设置为 running，可以重新播放动画。

/* 将动画状态设置为 paused */
element {
  animation-play-state: paused;
}

/* 将动画状态设置为 running */
element {
  animation-play-state: running;
}

方法二：使用 @keyframes 规则

另一种暂停和继续播放动画的方法是使用 @keyframes 规则。通过在动画的关键帧（即 @keyframes 中声明的关键帧）处设置一个特殊的样式，并在需要时使用 JavaScript 来切换该样式，可以实现暂停和播放动画的效果。

/* 定义动画 */
@keyframes myAnimation {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 设置动画属性 */
element {
  animation: myAnimation 1s infinite;
}

/* 停止动画 */
element.pause {
  animation-play-state: paused;
  opacity: 1; /* 改变透明度以保留元素在停止时的变化 */
  transform: scale(1);
}

在 JavaScript 中，我们可以用以下代码来暂停或播放动画：

const element = document.querySelector('.myElement');
element.classList.toggle('pause');

方法三：使用 JavaScript 实现

最后，我们可以通过 JS 直接停止和启动动画。我们可以使用 DOM API 中的 animation 功能或 requestAnimationFrame 循环来达到目的。

/* 定义动画 */
element.style.animation = 'myAnimation 1s infinite';

/* 停止动画 */
element.style.animationPlayState = 'paused';

/* 继续播放动画 */
element.style.animationPlayState = 'running';

以上三种方法可以让您非常容易地暂停和恢复 CSS 动画。

参考链接：

• 动画-play-state 属性
• 利用 @keyframes 规则暂停和启动 CSS 动画
• css animation requestanimationframe