CSS变量不能驱动background-position动画，因其不支持@keyframes中插值；变量仅适用于静态样式如颜色、透明度、动画时长等，位移必须硬编码数值。
为什么直接用 CSS 变量控制 background-position 会失效
因为 background-position 动画不支持在 @keyframes 中用 CSS 变量插值——浏览器解析时把它当静态值处理，动画关键帧不会响应变量变化。你写 background-position: var(--pos, -200px) 0，最终只渲染首帧位置，后续位移完全不动。
常见错误是以为改 style.setProperty('--pos', '100px') 就能推动光条，结果光条卡死不动，或只跳一次。
- 真正生效的只有
animation声明里硬编码的数值（如from { background-position: -200px 0; }） - CSS 变量可用于控制非动画属性：比如
--skeleton-bg换灰阶色、--shine-color换高光色，但不能驱动位移逻辑 - 若强行用 JS 每帧改变量再触发动画重播（如删 class 再加），会导致闪烁、掉帧，破坏 GPU 加速连续性
怎样用 CSS 变量安全地定制骨架屏样式
变量该用在“静态配置层”，而不是“动态位移层”。把可变部分抽离为设计系统参数，既保持动画稳定，又支持主题切换和多端适配。
- 用
--skeleton-base控制底层灰度：background-image: linear-gradient(90deg, var(--skeleton-base) 25%, #e0e0e0 50%, var(--skeleton-base) 75%) - 用
--shine-alpha调节扫光透明度：linear-gradient(90deg, rgba(255,255,255,var(--shine-alpha)) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,var(--shine-alpha)) 100%) - 用
--skeleton-duration控制动画节奏：animation: shine var(--skeleton-duration, 1.5s) infinite linear，注意必须带默认值，否则未定义时动画崩 - 禁止对
background-size或background-position的数值部分使用变量（如var(--size) 100%），iOS Safari 会忽略整个声明
background-position 动画必须写死数值的三个硬约束
这不是偷懒，而是浏览器渲染管线决定的：CSS 动画关键帧必须可预编译，变量无法参与合成层计算。
立即学习“前端免费学习笔记（深入）”；
-
background-size必须大于容器宽度（如300px 100%或200% 100%），否则background-position位移一到边界就消失，光条“断连” -
@keyframes中的background-position必须带单位（-200px 0或-200% 0），IE 和旧版 Chrome 会静默丢弃无单位值（如-200 0） - 起始偏移建议设为负值（如
-200px），确保光条从左外侧入场；若写成0 0，首帧就是光条居中，用户感知不到“扫描开始”
需要动态控制动画节奏时，该怎么做
真要根据网络状态或设备性能调速（比如弱网下放慢光效），别碰变量驱动位移，改用 JS 切换预设 class：
- 定义多个动画时长 class：
.skeleton-slow { animation-duration: 2.5s; }、.skeleton-fast { animation-duration: 1s; } - 加载前根据
navigator.connection?.effectiveType或 FPS 监控结果，选一个 class 加到容器上 - 切忌用
el.style.animationDuration = '1.2s'—— 内联样式优先级过高，会覆盖 CSS 变量定义的 fallback 值，导致主题色等其他变量失效 - 如果用了 Vue/React，把 class 名绑定到状态即可，无需操作 DOM
最易被忽略的是：改了 background-size 却没同步更新 @keyframes 里的 background-position 数值范围。比如 background-size: 400px 100% 时，from 应设为 -400px 0，否则光效只走一半就重头来。
