animation-play-state仅对@keyframes动画有效，需满足名称严格匹配、animation声明有效且时长非零、动画处于活跃状态三前提；支持:hover和JS控制，但不作用于transition或JS动画。
要用 animation-play-state 控制 CSS 动画暂停与播放，关键不是“加个属性就行”，而是确保动画已真正启动、作用目标准确、状态切换逻辑可靠。它只对 @keyframes 定义的 CSS 动画生效，对 transition、JS 动画、Canvas 等完全无效。
必须满足三个前提条件
否则 animation-play-state 不会起作用：
-
@keyframes 名称严格匹配：大小写、拼写、空格都需一致，比如
@keyframes slide对应animation: slide 4s infinite，写成Slide或slid就失效 -
元素上已声明有效的
animation：时长不能为0s，且不能被animation: none或其它规则覆盖；推荐显式写animation-play-state: running初始化，避免 Safari 等浏览器忽略 hover 切换 -
动画正处于活跃状态：刚插入 DOM 还没触发、或已自然结束且
animation-fill-mode: forwards锁定终态，此时设paused也无反应；可用getComputedStyle(el).animationPlayState检查是否返回"running"
纯 CSS 悬停暂停的正确写法
适用于轮播图、滚动字幕等简单交互场景：
- 动画写在容器上，
:hover直接作用于该容器：.marquee { animation: scroll 6s linear infinite; animation-play-state: running; }<br>.marquee:hover { animation-play-state: paused; } - 如果动画实际在子元素（如
.carousel ul）上，:hover必须匹配到它：.carousel:hover ul { animation-play-state: paused; }或.carousel ul { animation: ...; animation-play-state: running; } .carousel:hover ul { animation-play-state: paused; } - 不要在
:hover中写animation: none或unset——这是终止重置，不是暂停；也不要用transition过渡animation-play-state，它不支持过渡
JavaScript 动态控制更灵活可靠
适合点击开关、键盘响应、条件暂停等复杂逻辑：
- 用内联样式设置最稳：
el.style.animationPlayState = 'paused';（注意驼峰命名，不是animation-play-state）el.style.animationPlayState = 'running'; - 用 class 切换更适合批量管理：
CSS 中定义.is-paused { animation-play-state: paused !important; }，JS 中el.classList.toggle('is-paused'); - 多个动画并存时（如
animation: fade 1s, spin 2s infinite;），JS 可按顺序控制：el.style.animationPlayState = 'paused, running';，顺序必须和animation值完全对应
移动端与兼容性注意事项
别默认 :hover 在手机上可用：
- iOS Safari 和多数安卓 WebView 对
:hover支持极弱，甚至完全不触发；需搭配@media (hover: hover)条件判断，或改用 touchstart/touchend 事件 + JS 控制 - 旧版 Safari（≤8）需加前缀：
-webkit-animation-play-state: paused; - IE10+、Chrome 43+、Firefox 16+、Safari 9+ 均支持；不支持的浏览器会静默忽略该属性，动画照常运行
- 暂停后动画时间轴冻结，恢复时从原位置继续，不会重播——这是设计行为，无需额外处理
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
