CSS中如何停止动画

有时候我们需要在动画还没有完成时停止它，或者在用户交互时暂停动画。CSS提供了一些方法来实现这些操作。

1. 使用animation-play-state属性

animation-play-state属性可以控制动画的播放状态，它有两个可选值：running和paused。默认值为running。

animation-play-state: running|paused;

我们可以通过JavaScript来控制该属性的值，以实现暂停或继续动画的效果。下面是一个例子：

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

#box {
  animation: move 2s ease infinite;
}

@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

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

function toggleAnimation() {
  var box = document.getElementById("box");
  box.classList.toggle("paused");
}

2. 使用animation-fill-mode属性

animation-fill-mode属性可以控制动画播放前和播放后的样式，它有四个可选值：none、forwards、backwards、both。默认值为none。

animation-fill-mode: none|forwards|backwards|both;

我们可以将animation-fill-mode属性的值设置为forwards，以使动画停止时保持在动画结束时的状态。下面是一个例子：

<div id="box"></div>
<button onclick="stopAnimation()">Stop Animation</button>

#box {
  animation: move 2s ease forwards;
}

@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

function stopAnimation() {
  var box = document.getElementById("box");
  box.style.animationPlayState = "paused";
  box.style.animationFillMode = "forwards";
}

总结

以上是CSS中停止动画的两种方法。animation-play-state属性可以控制动画的播放状态，而animation-fill-mode属性则可以控制动画播放结束时的样式。二者可以互相结合使用，实现更复杂的动画控制效果。