animation-play-state 不能单独控制单个动画，仅作用于元素整体所有动画；需拆分dom或用js的getanimations()手动管理；非继承属性；hover暂停需显式声明running；js设置须用字符串值；移动端需raf或微任务延迟。
animation-play-state 能不能直接控制单个动画暂停
不能。它只对应用了 animation 的元素整体生效，且会同时影响该元素上所有正在运行的 CSS 动画（包括通过 @keyframes 定义的多个动画），无法单独暂停某一个动画轨道。
常见误操作是给同一个元素加了两个 animation 声明（比如 animation: move 2s, fade 3s;），以为能分别控制——实际只要设 animation-play-state: paused，两个都会停。
- 若需独立控制，得拆到不同 DOM 元素上，各自绑定独立动画
- 或改用 JavaScript 配合
getAnimations()（注意兼容性）手动筛选并调用pause() -
animation-play-state是继承属性，但不会从父元素继承到子元素的动画上——它只作用于自身声明的动画
hover 时暂停动画的写法和坑点
最常用场景是鼠标悬停暂停，写法看似简单：:hover { animation-play-state: paused; }，但有三个关键细节容易出错：
- 必须确保原始状态已显式声明
animation-play-state: running，否则部分浏览器（如旧版 Safari）可能忽略 hover 切换 - 如果动画本身设置了
animation-fill-mode: forwards，暂停后元素仍保持最后一帧样式，但再恢复时会从暂停帧继续，不是从头开始 - 用
transition过渡animation-play-state无效——这个属性不支持过渡动画
正确写法示例：
.box {
animation: spin 4s linear infinite;
animation-play-state: running; /* 显式声明 */
}
.box:hover {
animation-play-state: paused;
}
JavaScript 动态切换 animation-play-state 的注意事项
用 JS 控制比纯 CSS 更灵活，但也更容易踩 runtime 坑：
- 修改
style.animationPlayState时，值必须是字符串"running"或"paused"，写成true/false或1/0会静默失败 - 如果动画是通过 CSS 类名触发（比如
.animate { animation: slide 2s; }），JS 修改style.animationPlayState只在内联样式层级生效，可能被类名里的声明覆盖——建议统一用 class 切换，或用!important强制（不推荐） - 动画未开始前就设
paused，它会卡在第一帧；但若动画已结束，再设running不会重播，除非先重置animation属性（例如赋值空字符串再重设）
稳妥的 JS 控制模式：
const el = document.querySelector('.box');
el.classList.toggle('is-paused');
// 对应 CSS：
// .box.is-paused { animation-play-state: paused !important; }
移动端 touch 事件下 animation-play-state 失效的原因
在 iOS Safari 或部分安卓 WebView 中，:active 或 touchstart 后立即设 paused 常常无效，根本原因是：触摸事件触发时，动画可能尚未真正启动（浏览器渲染管线未同步），或存在合成层调度延迟。
- 临时解法：加 1ms 微任务延迟，让动画至少执行一帧再暂停：
setTimeout(() => el.style.animationPlayState = 'paused', 1) - 更可靠方式：用
requestAnimationFrame确保在下一帧操作 - 极端情况（如快速连点）下，
animation-play-state切换可能被浏览器丢弃——此时应考虑改用transform+transition模拟动画逻辑
本质问题在于，animation-play-state 不是原子操作，它依赖浏览器对当前动画时间轴的感知精度，而移动端渲染节奏不如桌面稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
