CSS如何让动画暂停与播放_借助animation-play-state属性

animation-play-state 能控制单个动画暂停，但仅对应用了 animation 的元素整体生效，无法单独暂停某一个 keyframes；必须搭配有效的 animation-name 和非零 animation-duration 才起作用，多动画需用逗号对应声明状态。

animation-play-state 能不能控制单个动画暂停

能，但只对应用了 animation 的元素本身生效，不能单独挑出某一个 keyframes 动画去停——CSS 没有“动画实例 ID”这种概念。它控制的是整个 animation 属性声明的那套动画流程。

常见错误现象：animation-play-state: paused 加了没反应，大概率是动画根本没跑起来（比如 animation-duration 为 0，或 animation-name 拼错）。

• 必须搭配有效的 animation-name 和非零 animation-duration 才会起作用
• 多个动画用逗号分隔时，animation-play-state 也需用逗号对应写全，否则未指定的部分按默认 running 处理
• 该属性不触发动画重播，暂停后恢复就是从当前帧继续，不是从头开始

怎么用 JS 动态切换 pause / resume

直接改元素的 style.animationPlayState 最直接，注意驼峰命名，且值必须是字符串 "paused" 或 "running"。

使用场景：按钮控制轮播图、悬停暂停加载中的旋转图标、表单校验失败时让错误提示动画暂定以便阅读。

立即学习“前端免费学习笔记（深入）”；

const el = document.querySelector('.spinner');el.style.animationPlayState = 'paused'; // 暂停el.style.animationPlayState = 'running'; // 恢复

• 不要写成 el.style.animation-play-state（带短横线会报语法错误）
• 如果动画是通过 class 控制的，推荐用 classList.toggle('is-paused') 配合 CSS 规则，更利于维护
• 在 requestAnimationFrame 里频繁切换可能引发抖动，非必要别每帧都设

animation-play-state 对性能和兼容性的影响

暂停动画时，浏览器仍会保留动画状态（如 transform 矩阵、opacity 值），但不再计算帧、不触发重绘，CPU/GPU 占用明显下降——这是它比 display: none 或 visibility: hidden 更适合“临时停动画”的原因。

兼容性方面，IE10+、Edge 12+、Chrome 43+、Firefox 16+、Safari 9+ 都支持；iOS Safari 9.0+ 起可用，老版本 iOS 需要加 -webkit-animation-play-state 前缀（仅 Safari ≤ 8）。

• 不支持该属性的浏览器会忽略它，动画照常运行，不会报错
• 用在 @keyframes 内部无效，它只能作用于元素样式层
• 与 animation-fill-mode 共同使用时要注意：暂停后元素仍保持最后一帧样式，除非你显式重置了相关属性

为什么 hover 暂停后鼠标移开动画不继续

因为 CSS 优先级问题：hover 规则里的 animation-play-state: paused 生效了，但移开后如果没有明确写回 running，浏览器不会自动“恢复”，而是沿用之前设置的值（可能是继承来的、或初始值）。

典型错误写法：

.box { animation: slide 2s infinite; }<br>.box:hover { animation-play-state: paused; }

这样移出后 animation-play-state 仍是 paused，因为没定义非 hover 状态下的值。

• 必须补全默认状态：.box { animation-play-state: running; }
• 或者用 transition + animation-delay 组合模拟“暂停感”，但本质不是真暂停
• 若用 JS 控制，记得在 mouseleave 事件里主动设回 running

实际用的时候，最容易被忽略的是多动画逗号分隔时 animation-play-state 的对应关系，以及 hover 场景下忘记声明基础状态。这两处一漏，动画就卡死不动了。