CSS动画暂停与继续应使用animation-play-state属性，其值为running或paused，可无缝暂停并恢复动画进度，支持hover和JS交互控制，但无法单独控制多动画中的某一个。
想让 CSS 动画循环播放，又能在需要时暂停，关键不是靠 animation-iteration-count 或重设 animation-duration，而是用 animation-play-state 动态控制播放状态。
用 animation-play-state 切换暂停与继续
这个属性只有两个有效值：running（运行）和 paused（暂停）。它作用于整个动画链（包括循环中的任意时刻），且不会重置动画进度——暂停后恢复，会从当前帧无缝继续。
- 默认值是
running，所以初始启动无需额外设置 - 直接在元素上设置
style="animation-play-state: paused;"就能立刻暂停 - JS 中修改更灵活：
elem.style.animationPlayState = 'paused'或'running'
配合 hover 或点击实现交互式暂停
常见需求比如「鼠标悬停暂停、移开继续」，或「点击切换暂停/播放」，纯 CSS 就能搞定：
-
Hover 暂停：
.box { animation: spin 3s linear infinite; } .box:hover { animation-play-state: paused; } -
JS 点击切换：
button.addEventListener('click', () => { box.style.animationPlayState = box.style.animationPlayState === 'paused' ? 'running' : 'paused'; });
注意：多个动画需统一控制
如果元素同时应用了多个 animation（如 animation: fade 2s, move 4s），animation-play-state 会同时作用于所有动画。无法单独暂停某一个——这是它的限制，也是设计初衷：保持动画节奏一致。
立即学习“前端免费学习笔记（深入）”；
- 若需独立控制，建议拆到不同子元素上分别定义动画
- 避免混用
transition和animation-play-state做状态过渡，它本身不触发重绘或过渡效果
兼容性与实际建议
现代浏览器（Chrome 43+、Firefox 16+、Safari 9+、Edge 12+）均支持，移动端也无明显问题。
- 慎用在性能敏感场景（如长列表滚动中大量元素监听 hover），可加
will-change: animation-play-state提示优化 - 暂停时仍占用渲染资源（只是不计算帧），如需彻底停止，应移除
animation或设为none - 调试时可在 DevTools 的 Styles 面板直接编辑
animation-play-state实时观察效果
