CSS 暂停动画

在开发网页时，我们经常会使用 CSS 动画来为页面增添吸引力，但有时我们也需要暂停或者停止这些动画。本文将介绍如何暂停 CSS 动画。

使用 animation-play-state 属性

CSS 中的 animation-play-state 属性可以控制动画的运行状态。它可以设置为 running（默认值，动画正常播放）或 paused（动画暂停状态）。

示例代码

.animation {
  animation-name: example;
  animation-duration: 4s;
  animation-play-state: running;
}

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

在上述代码中，我们定义了一个名为 example 的动画，它在播放过程中会持续 4 秒钟。我们通过设置 animation-play-state 属性将动画设置为 running，表示初始状态下动画将正常播放。当鼠标悬停在动画元素上时，我们将 animation-play-state 属性的值设置为 paused，表示暂停动画播放。

示例效果

在这个 代码演示 中，你可以看到当鼠标悬停在图形上时动画会暂停播放，鼠标离开后动画恢复播放。

使用 JavaScript 控制动画

除了使用 CSS，我们也可以使用 JavaScript 控制动画的播放状态。要实现这个功能，我们需要操作 animation 属性的各个值：动画名称、时长、播放次数、延迟时间和运行状态。

以下是一个使用 JavaScript 实现暂停 CSS 动画的示例：

示例代码

<div id="animation" class="animation"></div>
<button onclick="toggleAnimation()">Toggle Animation</button>

<script>
  const animation = document.getElementById("animation");

  function toggleAnimation() {
    if (animation.style.animationPlayState === "paused") {
      animation.style.animationPlayState = "running";
    } else {
      animation.style.animationPlayState = "paused";
    }
  }
</script>

在上述示例中，我们首先使用 document.getElementById()方法获取动画元素，然后定义一个名为 toggleAnimation() 的函数，在函数中通过判断属性值来切换动画的播放状态。

示例效果

在这个 代码演示 中，你可以看到点击 Toggle Animation 按钮可以暂停或者恢复 CSS 动画的播放状态。

结语

CSS 动画虽然是网页开发中常用的技术，但是有时候我们需要暂停或者停止它们的播放状态。本文介绍了两种实现动画暂停的方法：使用 animation-play-state 属性和使用 JavaScript。以上两种方法各有优劣，开发者可根据具体需求选择适合的方法。