animation-play-state: paused仅对运行中的动画生效，需确保动画已启动；纯css依赖:hover或class切换，js推荐监听animationstart后设置或用getanimations().currenttime精准控制进度。
animation-play-state 怎么用才真能暂停
直接设 animation-play-state: paused 是最常用做法，但它只对「正在运行的动画」生效；如果动画还没开始、或已自然结束，再设这个值毫无反应。关键不是加不加这行 CSS，而是时机和触发条件。
常见错误现象：animation-play-state: paused 写在初始样式里，结果动画压根没动——因为动画根本没启动过，paused 对它无效。
- 必须等动画处于
running状态后，再动态切换为paused - 推荐用 JS 控制：监听
animationstart事件后再调用element.style.animationPlayState = 'paused' - 纯 CSS 场景下，可借助伪类（如
:hover）或 class 切换，但要确保目标元素已有正在播放的动画
想停在 60% 进度？CSS 本身做不到
CSS 动画没有「跳转到某百分比并暂停」的原生能力。animation-play-state 只能暂停当前帧，不能指定位置。所谓“停在 60%”，本质是让动画执行到那一帧时被卡住——这需要时间控制或 JS 干预。
使用场景：比如做进度条提示、分步引导动画，用户点击下一步前需定格在某个中间状态。
- 用
animation-duration和setTimeout手动算时间：60% 处暂停 ≈setTimeout(() => el.style.animationPlayState = 'paused', duration * 0.6) - 更稳的方式是改用
@keyframes+animation-delay配合负值，把动画“提前启动”到目标帧附近，再立刻暂停（但精度有限） - 注意：不同浏览器对负
animation-delay的解析略有差异，慎用于精确控制
用 JavaScript 操控 animation 对象更可控
CSS 动画背后有对应的 Animation 实例，通过 element.getAnimations() 能拿到它。这才是真正能读写进度、暂停、重置的入口。
参数差异：currentTime 是毫秒值，playbackRate 影响快慢，pause() 方法比 CSS 更可靠。
const anim = el.getAnimations().find(a => a.animationName === 'slide');-
anim.currentTime = anim.effect.getComputedTiming().duration * 0.6;—— 直接设时间戳（需确保anim.ready已 resolve） - 注意：
currentTime设值后动画会自动暂停，无需额外调pause() - 兼容性：Chrome 120+ / Firefox 125+ 支持完整 API；Safari 目前对
currentTime设置支持不稳定
transition 和 animation 混用时暂停会失效
如果元素同时有 transition 和 animation，且你试图用 animation-play-state 暂停动画，但视觉上仍在动——大概率是 transition 在偷偷补间。
性能影响：transition 触发重排/重绘优先级高于 animation，容易掩盖动画暂停效果。
- 检查 DevTools 的 Animations 面板，确认真正生效的是哪条动画轨道
- 临时禁用 transition：加
transition: none !important测试是否干扰暂停 - 避免对同一属性（如
transform）既写 transition 又写 animation，浏览器行为不可靠
动画暂停这件事，表面是加个 CSS 属性，实际得看它在哪个生命周期、被谁触发、有没有其他样式在抢控制权。最稳的路径往往是 JS + currentTime，但得接受 Safari 的兼容现实。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
