animation-play-state是唯一能动态暂停css动画而不重置帧的属性，取值为running或paused，需配合已声明的animation使用，支持:hover和js控制，但不支持transition且移动端需适配touch事件。
animation-play-state 控制暂停与继续
直接用 animation-play-state 是最可靠的方式。它支持 running 和 paused 两个值，且能精准控制当前动画状态，不重置计时器、不丢帧。
关键点在于：悬停时设为 paused，离开时恢复为 running，浏览器会从暂停处继续执行，而不是从头播或跳到末尾。
- 必须写在触发元素的 hover 伪类里，不能只写在初始规则中
- 初始状态要显式声明
animation-play-state: running，否则部分浏览器（如旧版 Safari）可能默认为running但 hover 切换后行为不一致 - 如果动画用了
animation-fill-mode: forwards，暂停后元素仍保持最后一帧样式，不影响视觉连贯性
避免用 animation-delay 模拟“继续”
有人尝试在 :hover 里把 animation-delay 设为负值来“倒带”，这是错的。它不会继续播放，而是重新开始一个新动画实例，时间偏移量也难精确计算。
典型错误现象：animation-delay: -2s 后动画突然跳回中间某帧，或出现卡顿、重复触发。
-
animation-delay只影响动画启动时机，不干预运行中状态 - 多个动画同时存在时，手动算延迟极易出错，尤其当动画时长不同或有循环次数限制时
- 这种写法在 Chrome 115+ 已被证实会导致合成层失效，影响性能
兼容性与常见陷阱
IE10+、Edge 12+、Firefox 16+、Chrome 43+ 都支持 animation-play-state，但 Safari 在 iOS 9.3–12.1 中存在 bug：hover 离开后偶尔卡在 paused 状态。
- 修复方案：给离开状态加过渡（哪怕 1ms），例如
transition: animation-play-state 0.001s - 如果动画本身设置了
animation-iteration-count: infinite，暂停/继续完全没问题；但若为有限次数（如3），暂停后再继续，剩余次数仍保留 - 不要对
@keyframes本身做 hover 切换——CSS 不允许在媒体查询或伪类中重定义关键帧
一个可直接粘贴的最小示例
.spinner {
width: 40px;
height: 40px;
border: 3px solid #eee;
border-top-color: #333;
border-radius: 50%;
animation: spin 1.2s linear infinite;
animation-play-state: running;
}
.spinner:hover {
animation-play-state: paused;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
注意：animation-play-state 必须和 animation 同级声明，且 hover 规则需放在后面才能覆盖。如果用 CSS-in-JS 或构建工具，确保它没被自动删掉（某些精简插件会误删未用属性）。
真正麻烦的是嵌套动画或用 will-change 提升图层的场景——暂停后图层可能被回收，再继续时有短暂闪烁，这时得配合 transform: translateZ(0) 强制维持合成。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
