仅靠 CSS 无法实现暂停后跳转到指定时间点播放，因 animation-play-state 只能冻结帧，CSS 无 currentTime 属性；需用 JavaScript 动态计算 elapsed 时间并调整 animation-duration 与 animation-delay 模拟，或改用 requestAnimationFrame 手动驱动时间轴。
animation-play-state 暂停后无法直接跳转到指定时间点
单纯用 animation-play-state: paused 只能冻结当前帧，不能“跳”到某个时间点再继续。CSS 动画没有类似 JavaScript 的 currentTime 属性，也没有原生 API 支持运行时修改动画进度。所以想“暂停后恢复到 2.3s 处再播放”，仅靠 CSS 是做不到的。
用 animation-delay 配合重置 animation-name 是常见误用
有人尝试在暂停后改 animation-delay 负值（比如 -2.3s）来“倒带”，但这只在动画未开始时生效；一旦动画已运行，修改 animation-delay 不会改变当前进度或触发重播。更常见的错误是：清空再设回 animation-name 来强制重启，但这样会丢失当前状态，从头开始，而非从目标时间点继续。
-
animation-delay仅控制动画启动前的等待时间，对已运行动画无效 - 修改
animation-name（如从fade改成none再改回）会触发重计算，但动画状态重置，animation-start时间也重置 - 浏览器不会把负
animation-delay解释为“回退”，只是延迟首次播放
真正可行的方案：用 JavaScript 控制 animation-duration 和 animation-delay 组合模拟
核心思路是：暂停后，记录当前已运行时间 elapsed，然后通过动态设置 animation-duration 和 animation-delay，让下一次播放“看起来”是从目标时间点开始。实际是伪造起始偏移——例如想从 2.3s 开始，就设 animation-delay: -2.3s + animation-duration: 原时长 - 2.3s，并确保动画 fill-mode 是 forwards 或 both。
- 必须用 JS 获取当前时间戳与动画开始时间差，推算
elapsed - 重设样式时，要同时更新
animation-duration、animation-delay和animation-play-state - 动画关键帧需设计为支持任意起点（避免依赖
from的绝对初始态） - 注意浏览器渲染节奏：
requestAnimationFrame中读取和写入样式可减少跳帧
element.style.animationDuration = '0.7s'; element.style.animationDelay = '-2.3s'; element.style.animationPlayState = 'running';
更稳定的做法：放弃 CSS 动画，改用 requestAnimationFrame 手动驱动
当需要精确控制播放位置（尤其是暂停/跳转/变速），CSS 动画的 declarative 特性反而成了限制。用 JS 管理时间轴，配合 transform、opacity 等可硬件加速的属性，性能不输 CSS 动画，且完全可控。
立即学习“前端免费学习笔记（深入）”；
- 保存动画参数：总时长、缓动函数、起始/结束值
- 在
requestAnimationFrame回调中根据当前时间戳计算进度，手动设置样式 - 暂停时只停止 rAF 循环，跳转只需修改内部
startTime或elapsed变量 - 兼容性好，无 CSS 动画重排/重绘不确定性
复杂动画里，CSS 的简洁性优势会被控制力缺失抵消。真要“暂停后恢复到特定时间点”，JS 时间轴才是唯一可靠路径。
