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 场景下忘记声明基础状态。这两处一漏，动画就卡死不动了。 
