css变量在style中动态更新仅对静态属性（如颜色、透明度）生效，动画相关属性（如background-position）因浏览器仅解析一次关键帧而不响应变化；动态调速需js注入新@keyframes规则，显隐控制推荐用data-loading而非style.display。
style属性里写CSS变量为什么动不起来
直接在style里写background-position: var(--pos)，再用element.style.setProperty('--pos', '100px')更新，光条不会移动——浏览器只在解析关键帧时读取一次变量值，之后动画全程按初始值跑，变量变更完全不触发重计算。
哪些CSS变量能在style里安全刷新
能生效的只有不参与动画插值的静态属性，比如颜色、透明度、背景色停点位置。这些值改了会立刻重绘，且不影响动画节奏：
-
--skeleton-bg：控制linear-gradient(90deg, var(--skeleton-bg) 25%, #e0e0e0 50%)里的灰阶主色 -
--shine-alpha：调节扫光层透明度，如rgba(255,255,255,var(--shine-alpha)) -
--skeleton-duration：仅当配合@keyframes内calc()使用时才有效，单独写在style里对animation-duration无效
想动态调速只能靠JS重写@keyframes
如果必须运行时切换动画快慢（比如根据网络延迟调整），style里改变量没用，得用JS生成新规则并注入<style></style>标签：
const speed = 2.0;
const style = document.createElement('style');
style.textContent = `
@keyframes skeleton-shine {
0% { background-position: -200px 0; }
${75 / speed}% { background-position: 0 0; }
${100 / speed}% { background-position: 200px 0; }
}`;
document.head.appendChild(style);
注意：Safari 16.4以下版本不支持calc()在@keyframes中，此时需降级为预设几档固定速度的class切换。
data-loading比style更可靠地控制显隐
别用style.display = 'none'切骨架屏，容易闪白屏或错帧。正确做法是服务端/构建时注入，CSS写成：
[data-loading="true"] .skeleton { display: block; }
[data-loading="true"] .content { display: none; }
JS拿到数据后只做document.documentElement.removeAttribute('data-loading')，所有样式响应自动完成，不依赖DOM重排时机。
真正难的是让多个骨架块视觉同步——变量全局有效，但每个元素动画起始时间不同。除非统一用animation-delay硬编码对齐，否则光条扫过节奏天然错开，这是浏览器渲染机制决定的，不是代码写错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
