CSS变量在@keyframes中不可用是规范限制，必须用calc(var(--x))注入数值；animation-duration等属性可直接用var()；Safari对函数内嵌变量支持不稳定，需实测验证。
@keyframes内部不解析CSS变量是规范限制，不是浏览器bug
CSS变量在@keyframes里写var(--x)会被浏览器静默丢弃，整行声明失效——这不是兼容性问题，而是CSS Animations Level 1规范明确禁止的行为。你看到动画没动、数值没变、甚至整个@keyframes在开发者工具里消失，大概率就是栽在这里。
关键点在于：变量作用域只到「触发动画的元素」这一层，@keyframes块本身是一个独立的样式上下文，不继承也不计算外部变量。
想让位移/缩放等数值响应变量，唯一合法路径是calc()
calc(var(--dist))是目前唯一被所有现代浏览器（含Safari 15.4+）稳定支持的注入方式，但必须满足三个条件：
-
transform、top、width等属性本身支持计算值 -
calc()括号不能省，calc(var(--dist))✅，calc var(--dist)❌ - 变量值要是合法数字，
--dist: 200px可以，--dist: "200px"或--dist: 200（无单位）会失败
示例：@keyframes slide { 100% { transform: translateX(calc(var(--offset))); } } —— 这行能生效，前提是.item { --offset: 120px; }已定义在该元素或祖先上。
animation-duration和animation-delay可以直接用var()，但别混淆层级
animation-duration和animation-delay这两个属性原生支持var(--dur)，不需要calc()包裹，也无需改写@keyframes内容。
常见错误是把变量逻辑全塞进@keyframes里，结果发现animation-duration: var(--dur)明明写了却没效果——其实是因为@keyframes块本身因含非法var()被整个忽略，导致动画根本注册不上。
正确分工是：
- 用
@keyframes写死动画逻辑（如transform: translateX(100px)） - 用
animation-duration、animation-delay控制节奏 - 用
calc(var(--x))控制关键帧中的可计算数值
Safari对函数内嵌变量的支持仍不稳定，实测比文档更重要
比如cubic-bezier(var(--x1), var(--y1), var(--x2), var(--y2))这种写法，在Safari 15.4之前完全不识别，15.4–16.6仅部分支持，17+才趋于稳定。但即使最新版，某些组合（如hsl(var(--h), 80%, 60%)）也可能回退为默认色。
真正可靠的方案永远是：先在目标环境开开发者工具，直接编辑元素的style看变量是否实时生效；再检查@keyframes是否出现在Computed面板的动画列表里——如果没出现，就说明它已被浏览器跳过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
