CSS动画中途暂停技巧，JavaScript实现精准控制

CSS动画无法原生实现精确进度暂停（如停在60%），`animation-play-state: paused`仅能整体暂停运行中的动画，而真正可控的中途定格需依赖JavaScript——通过`getAnimations()`获取动画实例，精准设置`currentTime`或监听`animationstart`事件后动态暂停，兼顾精度与可靠性；尽管存在Safari兼容性限制，但在进度条、分步引导等交互场景中，JS驱动的动画控制仍是当前最稳定高效的解决方案。

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 的兼容现实。

到这里，我们也就讲完了《CSS动画中途暂停技巧，JavaScript实现精准控制》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！