当前位置：首页 > 文章列表 > 文章 > 前端 > HTML如何暂停动画？手把手教你搞定animation-play-state

HTML如何暂停动画？手把手教你搞定animation-play-state

2025-06-21 09:31:09 0浏览收藏

想知道HTML如何暂停动画吗？本文手把手教你使用CSS属性`animation-play-state`轻松实现动画的暂停与播放。通过修改元素的样式，控制动画在`running`（播放）和`paused`（暂停）状态之间切换。更进一步，结合JavaScript，你可以实现点击按钮控制动画的播放与暂停，提升用户交互体验。本文还深入探讨了`animation-play-state`的常见问题和注意事项，助你避免踩坑，并介绍了更高级的动画控制方式。掌握`animation-play-state`，让你的HTML动画更加灵活可控！

HTML如何暂停动画？animation-play-state怎么使用？

暂停HTML动画其实不难，关键在于使用 animation-play-state 这个CSS属性。它允许你控制正在运行的动画是否暂停或继续播放。

1. `animation-play-state` 的基本用法

这个属性有两个常用值：

running：动画正常播放
paused：动画暂停（保持当前状态）

你可以通过修改元素的样式来切换这两个状态。例如：

.box {
  animation: move 2s infinite;
}

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

然后在HTML中，给元素添加或移除 .paused 类就可以控制动画是否暂停。

2. 结合JavaScript实现点击暂停/播放

实际开发中，我们通常希望用户能通过点击按钮来控制动画。这就需要JavaScript来动态操作类名或样式。

比如，HTML结构如下：

<div class="box" id="animatedBox"></div>
<button id="pauseBtn">暂停</button>
<button id="playBtn">播放</button>

对应的JS逻辑可以这样写：

const box = document.getElementById('animatedBox');
const pauseBtn = document.getElementById('pauseBtn');
const playBtn = document.getElementById('playBtn');

pauseBtn.addEventListener('click', () => {
  box.style.animationPlayState = 'paused';
});

playBtn.addEventListener('click', () => {
  box.style.animationPlayState = 'running';
});

注意：如果你用了多个动画（比如 animation-name: anim1, anim2），那么 animation-play-state 会同时影响所有动画的状态。