不支持。@keyframes是静态规则，解析阶段即固化数值，而css变量在渲染时求值，生命周期错开，故var(--x)会被浏览器静默丢弃；仅calc(var(--x))可间接使用，但变量必须定义在动画元素或其祖先上。
为什么@keyframes里写var(--x)会被浏览器静默丢弃
因为@keyframes是静态规则块，浏览器在解析样式表阶段就将其固化为数值；而CSS变量的求值发生在元素渲染时，两者生命周期完全错开。你写的opacity: var(--fade)不会报错，但整条声明会被当成无效样式跳过——Chrome 120+、Firefox 125、Safari 16.4+ 全部一致执行该规范，不是bug，也无法绕过。
calc(var(--x))为什么能“进关键帧”，但必须挂载在元素上
calc()是唯一被规范允许的入口，但它本身不执行变量求值，只是把表达式标记为“待计算”。真正起作用的是：变量--x必须定义在触发动画的元素（如.card）或其祖先（如:root）上，浏览器在计算该元素动画帧时，才把calc(var(--x) * 1px)替换为具体数值并参与插值。
- 变量只定义在
@keyframes外部、未挂到动画节点 → 无效 - 没设默认值：
calc(var(--x, 0) * 1px)漏了, 0→ 整个calc()退为0 - 变量值带单位（如
--x: 100px）再套calc(var(--x) + 10px)→ 单位混用，结果不可预测
animation-duration等属性可以直接用var()，为什么？
因为animation-duration、animation-timing-function、animation-delay这些是动画控制属性，它们属于“应用层”而非“关键帧体”，浏览器会在元素级样式解析时直接读取变量值，无需经过关键帧插值流程。
-
.btn { animation-duration: var(--dur, 0.3s); }✅ 直接生效 -
@keyframes fade { 0% { animation-duration: var(--dur); } }❌ 无效，animation-duration不能出现在关键帧体内
想真正过渡CSS变量本身，得靠@property
如果目标是让--count从0平滑变到100，仅靠calc()不行——它只解决“关键帧参数化”，不解决“变量值自身插值”。这时必须用@property注册类型：
@property --count {
syntax: '<number>';
inherits: false;
initial-value: 0;
}</number>
之后才能写transition: --count 0.5s;。注意：@property必须写在顶层<style></style>中，不能JS动态插入；Firefox至今不支持，别指望全局兼容。
最易被忽略的是：所有依赖变量的动画行为，都建立在“变量定义位置”和“使用上下文”的严格匹配上——差一层作用域，就差一个静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
