CSS变量不能直接驱动骨架屏闪烁动画节奏或透明度变化，因其在@keyframes中被静态解析；仅支持用@property（Chromium专属）或JS配合降级方案实现动态控制。
不能用 CSS 变量直接控制骨架屏的“闪烁”动画节奏或透明度阈值——因为 animation 本身不响应 CSS 变量变化，除非配合 @property（仅 Chromium 系列支持）或 JS 驱动。 骨架屏的呼吸感/扫描感必须靠 @keyframes + animation 实现，CSS 变量只适合做「开关」或「样式主题切换」，比如统一启用/禁用、切换亮暗模式下的基础色值。
为什么直接用 --shine-opacity 控制闪烁会失效
常见错误是这样写：
.skeleton { opacity: var(--shine-opacity, 0.8); animation: fade 1.5s infinite; }
@keyframes fade { 0% { opacity: var(--shine-opacity, 0.4); } 100% { opacity: var(--shine-opacity, 0.9); } }
结果动画永远卡在初始值——@keyframes 中的 var() 在声明时就被解析为静态值，不会随变量变更重触发动画。浏览器不把 CSS 变量当作可动画属性。
- opacity 动画本身可被 CSS 变量“设初值”，但不能“驱动变化”
- 想让多个骨架块共用一套透明度阈值（比如加载中统一用
0.3 → 0.7），得靠预定义的@keyframes+ 类名批量控制，而非运行时改变量 - Chromium 120+ 支持
@property声明可动画变量，但 Safari / Firefox 仍不支持，线上项目不可依赖
真正能用 CSS 变量统一控制的 3 个地方
变量不是没用，而是用在对的位置：
-
--skeleton-bg：统一骨架块底色，配合background-color直接生效，换肤时一键切换 -
--skeleton-shine-color：用于linear-gradient中的亮色段，比如linear-gradient(25deg, transparent, var(--skeleton-shine-color, #e0e0e0), transparent) -
--skeleton-animation-enabled：用作开关，配合animation: var(--skeleton-animation-enabled, skeleton-shine) 2s infinite linear，值为none时停掉所有动画（注意：需配合 JS 切换，纯 CSS 无法条件启用）
想动态调透明度阈值？JS + @property 是唯一可行路径（附兼容兜底）
如果真需要运行时调整闪烁强度（例如弱网下降低动画频率、深色模式下调低亮度），只能走 JS：
document.documentElement.style.setProperty('--shine-opacity-start', '0.2');
document.documentElement.style.setProperty('--shine-opacity-end', '0.6');
然后配合 Chromium 专属方案：
@property --shine-opacity-start { syntax: '<number>'; inherits: false; initial-value: 0.3; }
@property --shine-opacity-end { syntax: '<number>'; inherits: false; initial-value: 0.8; }
@keyframes fade-dynamic {
0% { opacity: var(--shine-opacity-start); }
100% { opacity: var(--shine-opacity-end); }
}</number></number>
⚠️ 但必须加降级：
- Firefox/Safari 用户看到的是 fallback 的固定动画（如
fade-legacy） - 别把
@property当通用 API，它目前仅限实验性功能，上线前务必检查CSS.supports('animation-timeline', 'some')或用 UA 判断 - 更稳妥的做法是预置几套 class：
skeleton--mild/skeleton--intense，用 JS 切换类名而非变量
容易被忽略的性能陷阱：变量 ≠ 动画优化
有人以为用变量代替硬编码就能提升性能，其实不然：
- 改
--skeleton-bg触发的是 repaint，和直接写死#e0e0e0开销一致 - 在
@keyframes里反复读var()不会加速，反而因解析开销略增首帧延迟 - 真正影响帧率的是
background-position动画是否用will-change: background-position提前提示，或是否启用了transform: translateZ(0)强制 GPU 加速——这些和变量无关
变量能管住样式一致性，但管不住动画逻辑。骨架屏的“闪”是视觉节奏问题，不是数值配置问题；该写死的 @keyframes 就写死，该用 JS 控制的相位就用 JS 控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
