@keyframes 内部不解析 var()，必须用 calc(var(--x)) 包裹才生效；opacity 等非计算属性不支持；变量需定义在动画元素上，animation-duration/delay 可直接用 var() 控制。
关键帧里直接写 var(--x) 会失效
这不是浏览器兼容问题，而是 CSS 规范明确禁止：@keyframes 块内部不解析自定义属性。你写 transform: translateX(var(--dist))，浏览器会静默丢弃整条声明，动画看起来“没动”或“卡在初始态”。常见错误现象包括：位移没生效、opacity 值不变、缩放始终为 1。根源不是变量没定义，而是作用域隔离——@keyframes 是封闭上下文，读不到外部 :root 或元素上的 var()。
calc(var(--x)) 是唯一合法入口
想把变量值带进关键帧，必须用 calc() 包裹，且仅限支持计算的属性（如 transform、top、width）。不能用于 animation-name 或 opacity 这类非计算型属性。
-
@keyframes slide { 100% { transform: translateX(calc(var(--dist))); } }✅ 有效（注意括号不能省） -
@keyframes fade { 50% { opacity: var(--alpha); } }❌ 无效，opacity不接受calc()，只能靠外部animation属性控制时长/延迟 - Safari 15.4 之前不支持
cubic-bezier(var(--x1), ...)这种函数内嵌写法，需降级为固定值或 JS 动态注入
变量必须挂载在触发动画的元素上
定义位置决定作用域：:root 下的变量全局可用，但更推荐绑定到具体元素，便于逐个配置。例如网格项逐个右移：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
.grid-item:nth-child(1) { --offset: 100px; }.grid-item:nth-child(2) { --offset: 180px; }- 复用同一段
@keyframes：100% { transform: translateX(calc(var(--offset))); } - 触发只需：
.grid-item { animation: slide 0.5s cubic-bezier(0.2, 0.8, 0.3, 1); }
如果变量定义在父容器，子元素需继承（inherit 或显式 var(--x, fallback)），否则取不到。
用变量控制 animation-duration 和 animation-delay
这是最稳定、兼容性最好的方式，无需 calc()，直接生效：
.item { --anim-dur: 0.4s; --anim-delay: 0.2s; animation-duration: var(--anim-dur); animation-delay: var(--anim-delay); }- JS 修改时：
el.style.setProperty('--anim-dur', '0.6s')，所有依赖该变量的动画实时重算 - 负延迟（如
calc(var(--anim-delay) * -1)）不是倒播，而是跳到动画中间帧开始，容易造成视觉跳跃，慎用 - 旧版 Safari（transition 响应变量变化支持弱，但
animation子属性基本无坑
真正难的不是怎么写，而是判断哪些值该塞进 calc()、哪些该挪到 animation 属性里——前者只解决“关键帧内数值动态化”，后者解决“动画节奏统一调控”，混用容易漏掉作用域或单位缺失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
