animation-play-state 必须显式声明且动画已启动才生效，需先通过animation属性激活动画再控制状态，CSS悬停需默认设为running，JS应使用animationPlayState而非带短横线的写法。
animation-play-state 必须显式声明才生效
很多情况下加了 animation-play-state: paused 却没反应，根本原因是动画压根没启动——animation-duration 为 0、animation-name 拼错、或没声明 animation 属性本身。这个属性不会“激活”动画，只控制已运行的动画状态。
正确写法要成对出现：
-
animation: bounce 2s infinite（先让动画跑起来） -
animation-play-state: paused（再暂停）
纯 CSS 悬停暂停时，务必在非 hover 状态下也写明 animation-play-state: running，否则 Safari 等浏览器可能忽略后续切换。
JS 控制时别写错 property name
element.style.animationPlayState 是标准写法，不是 element.style.animation-play-state（带短横线会语法报错），也不是 element.style['animation-play-state']（IE 旧版除外，现代浏览器不推荐）。
立即学习“前端免费学习笔记（深入）”；
常见错误写法：
-
el.style.animation-play-state = 'paused'→ 报错 -
el.style.WebkitAnimationPlayState = 'paused'→ 仅需在 iOS 12 或更老版本中补兼容，现在基本不用 -
el.style.animationPlayState = null→ 不会恢复默认，应设为'running'
建议统一用字符串赋值：el.style.animationPlayState = 'paused' 或 'running'。
多个动画共存时状态必须一一对应
如果一个元素同时应用了两个动画：animation: slide 1s, fade 0.5s，那么 animation-play-state 也得用逗号分隔写全：animation-play-state: paused, running。
漏写会导致未声明的部分保持 running（默认值），结果就是「看起来没暂停」。
更稳妥的做法是拆分 DOM：把 slide 和 fade 分到不同元素上，各自独立控制，避免状态耦合。
hover 暂停无法真正「停留」在中间帧
纯 CSS 的 :hover { animation-play-state: paused } 能暂停，但鼠标一移出，动画立刻从暂停点继续——它不支持「悬停完成、移出反向还原」这类精细逻辑。
这种需求必须用 JS 监听 animationstart 和 animationend 事件，手动记录当前 transform/opacity 值，并在移出时触发反向过渡动画。否则会出现视觉跳变，比如旋转角度突然 snap 回初始值。
另外，animation-play-state 本身不支持 transition，试图给它加过渡毫无效果。
