css变量在@keyframes中被忽略，因规范禁止其求值；必须用calc(var(--x))嵌套使用，且变量需定义在动画元素上，仅部分属性支持，safari 16.4+才稳定兼容。
为什么var(--x)写在@keyframes里直接被忽略
浏览器规范明确禁止在@keyframes块内解析 CSS 变量，这不是兼容性问题，而是所有现代浏览器（Chrome 110+、Firefox 115+、Safari 16.4+）统一执行的行为。你写的transform: translateX(var(--dist));会被静默丢弃，整个关键帧声明可能降级为无效样式，动画不触发或部分属性失效。
根本原因是：CSS 变量的求值发生在「元素渲染时」，而@keyframes是静态规则定义，不参与运行时计算。它只接受字面量、函数调用（如ease）、或calc()这类可提前解析的表达式——但calc()本身必须包裹var()才能让变量“进入”关键帧上下文。
calc(var(--x))是唯一合法入口，但有硬限制
想让位移、缩放、背景位置等数值响应变量，必须把var()塞进calc()，且仅限支持计算的属性（如transform、top、background-position），不能用于animation-name或opacity这类非计算型属性。
-
calc(var(--offset))有效，但calc(var(--offset) * 2)在 Safari 15.4 之前会失败 -
calc(100% / var(--speed))可用于动态调整关键帧时间点，但 Safari 需 16.4+ 才稳定支持 - 括号不能省：
calc(var(--x))✅，calc var(--x)❌ - 单位必须显式：若
--x定义为100（无单位），则calc(var(--x) * 1px)才合法；若定义为100px，就别再乘单位
真正起作用的变量必须定义在「触发动画的元素」上
变量不能只写在:root里就万事大吉——它得落在能被该元素继承或覆盖的作用域中。比如网格项逐个右移，应这样组织：
.grid-item:nth-child(1) { --offset: 100px; }.grid-item:nth-child(2) { --offset: 180px; }.grid-item { animation: slideIn 0.5s cubic-bezier(0.2, 0.8, 0.3, 1); }
注意：@keyframes slideIn内部仍需写transform: translateX(calc(var(--offset)));，而不是试图在:root里定义--offset然后指望它自动生效。
内联 style 是最灵活的载体：<div class="item" style="--offset: 220px">，变量作用域精准，无继承干扰。<h3>
<code>animation-duration和animation-delay看似能绑变量，其实有坑
表面看animation-duration: var(--dur, 0.3s);能生效，但这是假象——它只在元素首次渲染时读取一次，后续 JS 修改--dur不会触发重播或时长重算。更严重的是：animation-duration本身**不支持运行时变量更新**，浏览器会静默回退到初始值（常为0s）。
真正可靠的做法是绕过这个属性，改用变量驱动关键帧位置：
@keyframes skeleton-shine {<br>
0% { background-position: -100% 50%; }<br>
calc(75% / var(--speed)) { background-position: 0% 50%; }<br>
calc(100% / var(--speed)) { background-position: 100% 50%; }<br>
}
这种写法把节奏“编码”进百分比节点，变量改了，关键帧分布自动重排，动画节奏实时响应——但代价是 Safari 16.4 以下完全不支持，必须做降级 fallback。
变量不是万能胶水，它是有求值边界和运行时约束的工具。关键帧里写var()等于白写，而calc(var())又受限于浏览器实现细节——这些边界不摸清，调试时只会反复怀疑是不是自己写错了语法。
