最常见原因是动画根本没启动；animation-play-state: paused只对正在运行的动画有效，需确保@keyframes名称匹配、animation声明生效且duration>0s，否则暂停无效。
animation-play-state: paused 为什么没生效
最常见原因是动画根本没启动——animation-play-state: paused只对「正在运行」的动画起作用。如果元素还没过animation-delay，或animation-duration为0s，或animation-name拼错，设了paused也白搭。
验证方式很简单：console.log(getComputedStyle(el).animationPlayState)。返回"running"才能放心切paused；返回空字符串或"initial"，说明动画压根没跑起来。
- 检查
@keyframes名称是否与animation-name完全一致（大小写敏感） - 确认元素上有生效的
animation声明，且animation-duration>0s - 避免把
animation-play-state: paused写在初始 CSS 里——它得等动画自己跑起来之后再动态加
hover 或点击触发暂停时的典型写法
纯 CSS 场景下，靠伪类或 class 切换最稳妥。但要注意：原始状态必须显式声明animation-play-state: running，否则部分浏览器（尤其是旧版 Safari）可能忽略 hover 切换。
例如鼠标悬停暂停：
立即学习“前端免费学习笔记（深入）”；
.box {
animation: spin 2s infinite;
animation-play-state: running; /* 必须显式写 */
}
.box:hover {
animation-play-state: paused;
}JS 点击切换更灵活，且不依赖层叠顺序：
-
el.style.animationPlayState = 'paused'—— 暂停 -
el.style.animationPlayState = 'running'—— 恢复（不能留空，否则回退到 CSS 规则值） - 读取状态用
getComputedStyle(el).animationPlayState === 'paused'，不是布尔值
多个动画共存时怎么精准控制
animation-play-state无法单独控制某一个动画，它作用于元素上所有animation声明。若写了animation: fade 1s, slide 3s infinite，设animation-play-state: paused会同时停掉两个。
想只暂停第二个？必须严格按顺序用逗号分隔：
- 全停：
animation-play-state: paused, paused - 只停第二个：
animation-play-state: running, paused - 顺序必须和
animation值一一对应，错一位就全乱
如果动画数量动态变化（比如 JS 插入新动画），硬凑逗号列表容易出错，建议拆到不同 DOM 元素上，各自绑定独立动画。
想停在 60% 进度？CSS 做不到，得靠 JS
CSS 没有「跳转到某百分比并暂停」的能力。animation-play-state只能卡住当前帧，不能指定位置。所谓“停在 60%”，本质是让动画执行到那一帧时被截住——这需要时间干预或 JS 操控。
两种可行路径：
- 用
setTimeout粗略算：setTimeout(() => el.style.animationPlayState = 'paused', duration * 0.6) - 用
getAnimations()精准控制（Chrome 120+ / Firefox 125+ 支持）：const anim = el.getAnimations().find(a => a.animationName === 'myAnim');anim.currentTime = anim.effect.getComputedTiming().duration * 0.6;（设完自动暂停）
Safari 对currentTime支持不稳定，且getAnimations()返回数组可能为空——得确保动画已触发且anim.ready已 resolve。
