animation-play-state 能真正暂停 CSS 动画但对 transition 无效，暂停时元素停留当前帧且不重置进度；通过 class 切换控制最稳妥，避免内联样式冲突，支持多动画统一控制，冻结属性值但不触发重排重绘。
animation-play-state 能否真正暂停动画
可以，但只对 animation 声明的 CSS 动画生效，对 transition 无效。它不会重置动画进度，暂停时元素停留在当前帧，恢复后从同一位置继续——这点和 JavaScript 的 pause() 行为一致。
如何用 class 切换控制暂停/恢复
最常用也最稳妥的方式是通过添加/移除 class 控制状态，避免内联样式污染和优先级冲突：
/* 默认播放 */
.animated {
animation: slide 3s ease-in-out infinite;
}
<p>/<em> 暂停态 </em>/
.animated.paused {
animation-play-state: paused;
}</p>
JavaScript 中只需操作 class：
const el = document.querySelector('.animated');
el.classList.add('paused'); // 暂停
el.classList.remove('paused'); // 恢复
- 不要用
el.style.animationPlayState = 'paused'直接写内联样式，容易被其他 CSS 覆盖 - 多个动画同时存在时，
animation-play-state会统一作用于所有声明的动画（除非用动画名单独控制） - 如果动画使用了
forwards或both的animation-fill-mode，暂停后仍保持最终/起始样式，不影响视觉连贯性
animation-play-state 对 keyframes 中 transform 的影响
暂停时，transform、opacity 等属性值会“冻结”在当前计算值上，但不会触发重排或重绘——这是纯合成层行为，性能友好。不过要注意：
- 若动画中混用了非合成属性（如
height、margin），暂停时这些属性仍会停留在当前计算值，但可能引发布局抖动 - 用
will-change: transform提前提示浏览器提升图层，能减少暂停/恢复时的卡顿 - 不要在
@keyframes里写animation-play-state—— 它不是可动画属性，浏览器会忽略
兼容性和常见失效原因
animation-play-state 在现代浏览器中支持良好（Chrome 43+、Firefox 16+、Safari 9+、Edge 12+），但以下情况会导致看似“不生效”：
- 动画本身已结束且未设置
infinite，再设paused无视觉变化 - CSS 优先级问题：更高权重的规则覆盖了
paused声明（比如另一个.animated规则没加!important但权重更高） - 动画名拼写错误或未匹配到
animation-name，导致整个animation声明无效，自然无法暂停 - 父元素设置了
visibility: hidden或display: none，动画会直接停止而非暂停，此时animation-play-state不起作用
复杂点在于：它不提供回调、不触发事件、也无法读取当前播放进度——需要暂停并精确控制时间点时，就得转向 Web Animations API 的 getAnimations() + pause()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
