如何在CSS中动态暂停与恢复正在运行的动画-css教程-PHP中文网

animation-play-state 可直接暂停或恢复 css 动画，保持当前帧和迭代数；需显式声明初始状态，避免兼容性问题，不适用于 transition，多动画统一控制，注意与 fill-mode、delay 的交互及 ios safari 兼容性。

如何在css中动态暂停与恢复正在运行的动画

用 `animation-play-state` 控制动画暂停/恢复

直接改元素的 animation-play-state 属性就能暂停或继续 CSS 动画，不需要 JS 重写关键帧或操作 @keyframes。它只影响播放状态，不重置动画进度、时间偏移或迭代次数。

常见错误是以为设成 paused 后再设回 running 会从头开始——其实不会，它严格保持当前帧位置和已运行的迭代数。

animation-play-state: running：正常播放（默认值）
animation-play-state: paused：暂停，画面冻结在当前帧
该属性可继承，但通常建议直接作用于动画元素本身
支持 transition（比如配合 opacity 做淡入暂停提示），但动画本身不会因此产生过渡效果

JS 中切换 `animation-play-state` 的安全写法

用 JS 操作时，别直接覆盖整个 style 对象，否则可能清掉其他内联样式；也别依赖 class 切换却忘了初始状态是否已声明 animation-play-state。

推荐方式是通过 class 控制，并确保 CSS 中已定义基础状态：

.animated {
  animation: slide 3s infinite;
  animation-play-state: running; /* 显式声明，避免浏览器默认行为差异 */
}
.animated.paused {
  animation-play-state: paused;
}

JS 触发只需：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

el.classList.add('paused'); // 暂停
el.classList.remove('paused'); // 恢复

不要用 el.style.animationPlayState = 'paused' —— 首字母大写在部分旧版 Safari 下不生效
如果动画是通过 @keyframes + animation-name 定义的，animation-play-state 才有效；用 transition 实现的“动效”不响应这个属性
多个动画同时存在时，该属性统一控制全部，无法单独暂停某一个

与 `animation-delay` 和 `animation-fill-mode` 的配合陷阱

暂停状态下，animation-delay 不会重新计时，animation-fill-mode 仍按原逻辑生效（比如 forwards 会让元素停留在最后一帧，哪怕你中途暂停了）。

容易踩坑的组合：

设了 animation-fill-mode: forwards 又在动画中途暂停 → 元素视觉上卡在“最后一帧”，但实际是停在中间某帧，和 forwards 冲突，表现不可预测
用 animation-delay: 2s + animation-play-state: paused 初始化 → 动画不会等 2 秒再暂停，而是立即暂停，延迟被挂起，直到恢复后才继续倒计时
恢复播放时，若之前有未完成的 delay，会接着走完剩余延迟时间，不是跳过