CSS 使用JavaScript手动通过CSS动画

在本文中，我们将介绍如何使用JavaScript手动通过CSS动画。

阅读更多：CSS 教程

什么是CSS动画

CSS动画是一种通过CSS属性的变化来创建动画效果的技术。CSS动画使得网页设计师可以通过添加简单的CSS样式，如变换、渐变和旋转等，来创建令人印象深刻的动画效果。

通过JavaScript控制CSS动画

在大多数情况下，CSS动画是自动播放的。然而，有时我们需要手动控制CSS动画的播放过程。这可以通过JavaScript来实现。下面是一些通过JavaScript手动控制CSS动画的常用方法：

暂停和播放动画

要暂停CSS动画，我们可以使用animation-play-state属性，并将其设置为paused。下面的示例演示了如何通过点击按钮来暂停和播放一个动画：

<button id="toggleButton">Toggle Animation</button>
<div id="animatedDiv"></div>

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

  toggleButton.addEventListener("click", function() {
    animatedDiv.style.animationPlayState = animatedDiv.style.animationPlayState === "paused" ? "running" : "paused";
  });
</script>

跳转到指定的动画帧

要跳转到CSS动画的指定帧，我们可以使用animation-play-state属性和animation-delay属性。通过将animation-play-state设置为paused，我们可以暂停动画，然后通过调整animation-delay属性来跳转到指定的帧。下面的示例演示了如何通过点击按钮来跳转到CSS动画的第3帧：

<button id="jumpButton">Jump to Frame 3</button>
<div id="animatedDiv"></div>

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

  jumpButton.addEventListener("click", function() {
    animatedDiv.style.animationPlayState = "paused";
    animatedDiv.style.animationDelay = "-2s";
  });
</script>

动态改变动画速度

要动态改变CSS动画的速度，我们可以使用animation-duration属性，并将其设置为不同的值。下面的示例演示了如何通过点击按钮来加速或减速一个动画：

<button id="speedButton">Change Speed</button>
<div id="animatedDiv"></div>

<script>
  const speedButton = document.getElementById("speedButton");
  const animatedDiv = document.getElementById("animatedDiv");
  let speed = 1;

  speedButton.addEventListener("click", function() {
    if (speed === 1) {
      animatedDiv.style.animationDuration = "0.5s";
      speed = 0.5;
    } else {
      animatedDiv.style.animationDuration = "1s";
      speed = 1;
    }
  });
</script>

检测动画结束事件

要检测CSS动画是否结束，我们可以使用animationend事件。下面的示例演示了如何在动画结束时显示一个提示消息：

<div id="animatedDiv"></div>
<div id="message" style="display: none;">Animation End!</div>

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

  animatedDiv.addEventListener("animationend", function() {
    message.style.display = "block";
  });
</script>