CSS 动画暂停与播放：实现动态交互的关键技巧

昨天 1106阅读

在网页设计中，CSS 动画能够为页面增添生动性和交互性，而对 CSS 动画进行暂停和播放的控制，更是提升用户体验的重要手段。本文将深入探讨如何实现 CSS 动画的暂停与播放，从基本原理到实际代码示例，为你全面解析这一关键技巧。

CSS 动画基础回顾

在开始探讨暂停和播放功能之前，我们先来回顾一下 CSS 动画的基本概念。CSS 动画主要通过 @keyframes 规则来定义动画的关键帧，然后使用 animation 属性将动画应用到元素上。以下是一个简单的 CSS 动画示例：

/* 定义一个名为 slide 的动画 */
@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200px);
  }
}

/* 将动画应用到元素上 */
.box {
  width: 50px;
  height: 50px;
  background-color: blue;
  /* 应用 slide 动画，持续时间 2 秒，无限循环 */
  animation: slide 2s infinite;
}

在上述代码中，我们定义了一个名为 slide 的动画，该动画会使元素在水平方向上移动 200 像素。然后，我们将这个动画应用到一个类名为 box 的元素上，并设置动画持续时间为 2 秒，且无限循环播放。

实现 CSS 动画的暂停与播放

使用 `animation-play-state` 属性

CSS 提供了 animation-play-state 属性来控制动画的播放状态，该属性有两个值：running 表示动画正在播放，paused 表示动画暂停。我们可以通过 JavaScript 动态修改这个属性的值来实现动画的暂停和播放。

以下是一个完整的 HTML、CSS 和 JavaScript 示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 动画暂停与播放</title>
  <style>
    /* 定义动画 */
    @keyframes move {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(300px);
      }
    }

    /* 应用动画到元素 */
    .animated-box {
      width: 50px;
      height: 50px;
      background-color: red;
      animation: move 3s infinite;
    }
  </style>
</head>

<body>
  <div class="animated-box"></div>
  <button id="pause-btn">暂停</button>
  <button id="play-btn">播放</button>

  <script>
    // 获取元素
    const box = document.querySelector('.animated-box');
    const pauseBtn = document.getElementById('pause-btn');
    const playBtn = document.getElementById('play-btn');

    // 暂停按钮点击事件
    pauseBtn.addEventListener('click', () => {
      box.style.animationPlayState = 'paused';
    });

    // 播放按钮点击事件
    playBtn.addEventListener('click', () => {
      box.style.animationPlayState = 'running';
    });
  </script>
</body>

</html>

在这个示例中，我们首先定义了一个名为 move 的动画，并将其应用到一个类名为 animated-box 的元素上。然后，我们创建了两个按钮，分别用于暂停和播放动画。当点击“暂停”按钮时，通过 JavaScript 将元素的 animationPlayState 属性设置为 paused；当点击“播放”按钮时，将其设置为 running。

兼容性考虑

虽然 animation-play-state 属性在现代浏览器中得到了广泛支持，但在某些旧版本的浏览器中可能存在兼容性问题。为了确保在各种浏览器中都能正常工作，可以使用浏览器前缀来增加兼容性。例如：

.animated-box {
  -webkit-animation: move 3s infinite; /* Safari 和 Chrome */
  -moz-animation: move 3s infinite; /* Firefox */
  -o-animation: move 3s infinite; /* Opera */
  animation: move 3s infinite;
}

.paused {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}

.running {
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;
}

结合交互场景

在实际应用中，我们可以结合更多的交互场景来实现动画的暂停和播放。例如，当鼠标悬停在元素上时暂停动画，鼠标离开时继续播放：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>鼠标交互控制 CSS 动画</title>
  <style>
    /* 定义动画 */
    @keyframes rotate {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    /* 应用动画到元素 */
    .rotating-box {
      width: 100px;
      height: 100px;
      background-color: green;
      animation: rotate 4s infinite linear;
    }

    /* 鼠标悬停时暂停动画 */
    .rotating-box:hover {
      animation-play-state: paused;
    }
  </style>
</head>

<body>
  <div class="rotating-box"></div>
</body>

</html>

在这个示例中，我们定义了一个旋转动画，并将其应用到一个类名为 rotating-box 的元素上。当鼠标悬停在元素上时，通过 CSS 的 :hover 伪类将动画的 animation-play-state 属性设置为 paused，从而实现动画的暂停。