纯 css 变量（--progress）无法直接驱动逐帧骨骼动画的播放进度，因其不触发重绘、不能被@keyframes或steps()读取为时间轴坐标，且浏览器不支持在关键帧中动态计算var()值。
纯 CSS 变量（--progress）无法直接驱动逐帧骨骼动画的“播放进度”，因为骨骼动画本质依赖帧序列 + 时序控制，而 CSS 自定义属性不触发重绘或重排，也不能被 steps() 或 @keyframes 直接读取为动画时间轴坐标。
为什么不能用 --progress 控制逐帧动画的当前帧
CSS 逐帧动画靠 background-position（或 mask-position、clip-path）在固定时间点跳变实现，其核心是 animation-timing-function: steps(N) 对连续过渡做离散切片。而 --progress 是静态值，不能作为动画关键帧的输入源——@keyframes 中不支持 calc(var(--progress) * 100%) 这类动态计算来定位帧位置。
- 浏览器不解析自定义属性在
@keyframes内的表达式，写进去会被忽略或报错 -
steps()的步数必须是编译期确定的整数，不能随变量实时变化 - 即使把
--progress绑定到animation-delay或animation-duration，也只能控制启停/快慢，无法“跳转到第 3 帧”
真正能用 CSS 变量介入的环节
你可以用 --progress 配合 JS 实现间接控制，但必须由 JS 触发状态变更，CSS 仅响应预设类名或属性：
- 用
--progress控制animation-play-state：例如.anim[style*="--progress: 0"] { animation-play-state: paused; }（需配合 attribute selector，不推荐，兼容性差） - 更可靠的是 JS 监听
--progress变化，再手动切换 class：element.classList.toggle('paused', progress === 0) - 用
--progress控制总时长：animation-duration: calc(var(--progress) * 2s)—— 仅影响速度，不改变帧序
替代方案：用 JS 精确跳转到指定帧
若需“拖动进度条跳到第 4 帧”，必须放弃纯 CSS 方案，改用 JS 计算并设置 background-position：
// 假设雪碧图横向排列，每帧宽 80px，共 12 帧
const frame = Math.min(11, Math.max(0, Math.floor(progress * 12)));
element.style.backgroundPositionX = `-${frame * 80}px`;
- 注意：
background-position-x在 Safari 旧版需用background-position全写 - 要保持动画流畅，避免在 JS 中频繁读写 offsetWidth 等触发回流
- 如果仍想保留 CSS 动画的硬件加速，可将 JS 设置的 position 作为“暂停态”，再用
animation-play-state: running恢复播放
真正棘手的地方在于：骨骼动画往往需要多层 mask/transform 叠加，而逐帧只是其中一环；此时用 CSS 变量做全局进度协调，很容易在不同层级间失去同步。最稳的方式是让 JS 成为唯一真相源，CSS 只负责视觉渲染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
