animation-play-state仅对已激活的动画生效；必须满足@keyframes定义正确、animation声明有效且duration非0、动画处于活跃播放状态三个条件，否则设置paused无效。
animation-play-state 不能单独“启用暂停”，它只对已启动的动画起作用；加了 paused 却没反应，90% 是动画压根没跑起来。
为什么写了 paused 却没暂停？
根本原因不是属性写错了，而是动画没被激活。必须同时满足三个条件，animation-play-state 才有控制权：
-
@keyframes已正确定义，且animation-name拼写、大小写完全一致 - 元素上有生效的
animation声明（比如animation: bounce 1s infinite），且animation-duration不能是0s - 动画正处于活跃播放中——刚插入 DOM 还没触发、或已自然结束且
animation-fill-mode: forwards锁定了终态，都不算“活跃”
最稳验证方式：console.log(getComputedStyle(el).animationPlayState)。返回 "running" 或 "paused" 才说明它“活”着；返回空字符串或 "initial"，基本就是没启动。
纯 CSS hover 暂停必须显式写 running
很多人写：.box:hover { animation-play-state: paused; }，结果 Safari 下失效。问题出在非 hover 状态下没声明初始状态：
- 必须在默认样式里也写上
animation-play-state: running，否则部分浏览器（尤其是旧版 Safari）会忽略后续切换 -
animation-play-state不支持transition，给它加transition: animation-play-state 0.2s完全无效 - hover 暂停后鼠标移出，动画会从暂停帧继续——它不支持“移出时反向还原”，这种需求必须用 JS 监听
animationend并手动控制样式
正确写法示例：
.box { animation: slide 2s infinite; animation-play-state: running; }<br>.box:hover { animation-play-state: paused; }
JS 控制必须用驼峰写法 animationPlayState
别写 el.style.animation-play-state = 'paused'，这会直接报语法错误：
- 标准写法是
el.style.animationPlayState = 'paused'（驼峰，无短横线） - 设为
null或空字符串不会恢复默认，要明确写'running' - 多个动画共存时（如
animation: fade 1s, spin 2s），animationPlayState必须严格对应顺序：el.style.animationPlayState = 'paused, running' - 读取当前状态统一用：
getComputedStyle(el).animationPlayState === 'paused'
多个动画想独立暂停？别硬扛
animation-play-state 天然不支持单个动画轨道控制，它只作用于整个元素的所有动画：
- 写
animation-play-state: paused会同时暂停所有动画，哪怕你只打算停其中一个 - 试图靠逗号分隔做精细控制（如
running, paused）极易出错：顺序错一位、漏一个值，就导致部分动画“看起来没暂停” - 真正稳妥的做法是拆 DOM——把
fade和spin分到两个不同元素上，各自绑定独立动画，再分别控制animationPlayState
复杂点在于：一旦动画靠 class 触发（比如 .animate { animation: bounce 1s; }），暂停类就得和动画类共存，且优先级必须压得住，!important 在这里不是偷懒，是必要手段。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
