CSS动画如何停止 详细教程与注意事项说明

网页上的动画效果能让界面更生动，比如按钮悬停时的跳动、加载图标旋转等。但有时候动画一旦开始就停不下来，反而让人眼花缭乱。比如一个提示框一直在闪，用户根本看不清内容。这时候就得想办法让CSS动画停下来。

用 animation-play-state 暂停动画

最直接的办法是使用 animation-play-state 属性。它有两个值：running 和 paused。默认是 running，设为 paused 就能暂停动画。

假设你有一个正在旋转的加载图标：

<div class="loader"></div>

对应的CSS：

.loader {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

现在想让它在鼠标悬停时暂停，可以这样写：

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

这样一来，把鼠标移上去，旋转就会立刻停下，移开又继续转。

通过 JavaScript 动态控制

有时候需要根据程序逻辑来控制动画，比如点击“停止”按钮后让动画消失。这时可以用JavaScript切换CSS类。

HTML结构：

<button onclick="stopAnimation()">停止动画</button>
<div id="box" class="box"></div>

CSS定义动画和暂停状态：

.box {
  width: 100px;
  height: 100px;
  background: red;
  animation: move 2s infinite alternate;
}

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

@keyframes move {
  from { transform: translateX(0); }
  to { transform: translateX(200px); }
}

JavaScript函数：

function stopAnimation() {
  document.getElementById('box').classList.add('paused');
}

点击按钮后，元素加上 paused 类，动画就停住了。

直接移除动画属性

如果不想保留动画状态，也可以直接把 animation 属性清掉。比如用JS设置：

document.getElementById('box').style.animation = '';

这会让动画彻底消失，元素停留在当前帧。适合用在只需要播放一次动画的场景，比如弹窗出现后就不该再动了。

利用 CSS 类切换实现开关效果

实际开发中，经常需要来回控制动画。可以准备两个类，一个带动画，一个不带。

.element {
  width: 50px;
  height: 50px;
  background: green;
}

.animate {
  animation: bounce 0.5s ease infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

初始时不加 animate 类，需要时用JS添加，要停就移除：

const el = document.querySelector('.element');
el.classList.remove('animate'); // 停止
el.classList.add('animate');    // 开始

这种方式灵活，适合按钮、开关、提示等交互组件。