无法直接获取css动画实时进度值，因浏览器未提供animation.progress等可读属性，仅能通过web animations api或js驱动方案实现进度控制。
不能直接获取 CSS animation 的实时播放进度值，浏览器不提供类似 animation.progress 这样的 JS 可读属性。
为什么无法用 JS 读取 animation 当前进度
CSS 动画的播放状态完全由渲染引擎内部管理，getComputedStyle(element).animationName 只能告诉你动画是否在运行、名称是什么，但没有任何 API 返回 0.37 或 62% 这类数值。你看到的「动画正在播到一半」只是视觉结果，不是可提取的数据。
-
animation-play-state只能读写running/paused，不带进度信息 -
animation-delay和animation-duration是静态声明值，无法反映当前已过去多少毫秒 - 即使使用
performance.now()手动计时，也无法对齐 CSS 动画的实际帧节奏（尤其受 tab 非激活、GPU 调度影响）
替代方案：用 CSS 自定义属性 + JS 同步控制
真正可控的做法是放弃「读取 CSS 动画进度」，改用 JS 主导进度，并通过 --progress 同步到 CSS 动画或 transform 驱动层：
- 用
requestAnimationFrame或setInterval模拟进度推进，手动更新element.style.setProperty('--progress', progress) - 让 CSS 动画依赖该变量：
transform: scaleX(var(--progress))，配合@keyframes定义起止状态 - 若必须用原生
animation，可通过animation-duration和启动时间推算理论进度，但仅适用于无暂停、无延迟、无 iteration 变化的简单场景
animation-delay 负值 ≠ 进度偏移，别误用
写 animation-delay: -2s 看起来像“从第 2 秒开始播”，实际只是让动画立即开始，并跳过前 2 秒的关键帧——它不改变总时长，也不提供任何进度反馈接口。
- 负延迟只影响初始偏移，后续仍按原
animation-duration循环，无法用于暂停/拖拽控制 - 如果动画已运行，再动态修改
animation-delay不会重置进度，浏览器忽略该变更 - 想实现“拖到 70% 暂停”，必须用 JS 控制
animation-play-state+ 手动计算并设置transform或width
真正需要读写进度的场景（比如 scrubber 拖拽、同步多个动画、调试时间轴），CSS 动画本身就不适合；得用 Web Animations API（element.getAnimations() 返回的 Animation 实例有 currentTime 属性），或者彻底转向 JS 驱动的方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
