animation-play-state仅对已声明且正在运行的css动画生效，用于暂停或恢复，不能启动动画；需配合animation-name、animation-duration等使用，hover或js可动态控制，注意兼容性与状态继承问题。
animation-play-state 什么时候能用
这个属性只对已声明 animation 的元素生效，且必须是正在运行的 CSS 动画（不是 transition，也不是 JS 控制的帧动画）。它不能“启动”动画，只能暂停或恢复——也就是说，元素得先有 animation-name 和 animation-duration 等基础配置，否则设成 paused 也看不出效果。
常见误用场景：
• 给没定义 animation 的元素加 animation-play-state: paused，毫无作用
• 在动画已自然结束（animation-fill-mode 未设或为 none）后尝试恢复，实际已无动画可恢复
• 期望它影响 @keyframes 中的某个片段，但它只控制整个动画实例的执行状态
怎么让鼠标悬停时暂停动画
最常用的方式是用伪类配合切换状态，比如让轮播图或呼吸灯效果在 hover 时暂停：
.pulse {
animation: breathe 2s ease-in-out infinite;
}
.pulse:hover {
animation-play-state: paused;
}
注意点：
• 必须确保原始规则里已启用循环（infinite），否则 hover 前动画就结束了
• 如果同时设置了多个动画（用逗号分隔），animation-play-state 会统一控制全部，不能单独暂停某一个
• 恢复时只需移开鼠标，无需额外写 running —— 浏览器自动回退到原声明值
JS 动态控制暂停/恢复更灵活
需要响应按钮点击、表单交互或滚动事件时，JS 是更可靠的选择：
const el = document.querySelector('.spinner');
el.addEventListener('click', () => {
const isPaused = el.style.animationPlayState === 'paused';
el.style.animationPlayState = isPaused ? 'running' : 'paused';
});
关键细节：
• 直接读 el.style.animationPlayState 只能拿到内联样式设置的值，查不到 CSS 文件里的声明；稳妥做法是用 getComputedStyle(el).animationPlayState
• 修改时推荐用 style.animationPlayState（驼峰写法），而非 style['animation-play-state']，兼容性更好
• 若动画由 class 切换触发（如添加 .animate 类），记得在 JS 中操作 class 后再设状态，避免样式层覆盖内联设置
容易被忽略的兼容性和边界情况
IE10+ 和所有现代浏览器都支持，但仍有几个坑要绕开：
• Safari 旧版本（≤13.1）对 animation-play-state 在 transform 动画中偶现失效，建议搭配 will-change: transform 提前提示渲染引擎
• 使用 animation-fill-mode: forwards 后暂停，再恢复，可能因起始状态不一致导致跳变；此时应改用 both 或手动重置 transform/opacity 等属性
• 在 Vue/React 等框架中，若动画绑定在条件渲染的元素上（如 v-if），组件卸载后再挂载，动画会重头开始，animation-play-state 不继承暂停状态
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
