css变量不能直接过渡，因浏览器将其视为无类型字符串，不支持插值；必须绑定到background-color等原生属性并对其声明transition，或用@property注册类型（chrome/safari支持）实现变量级过渡。
为什么 transition: --color 0.3s 完全无效
浏览器根本不会解析这条规则——它被当作无效声明静默丢弃。CSS 变量（自定义属性）本身不是可动画属性，不在 W3C 动画属性白名单里。transition 只对原生属性（如 background-color、opacity）起作用，而 --color 是一个字符串容器，没有类型、没有单位、没有插值语义。你写 transition: --color 0.3s，就像写 transition: data-id 0.3s，语法合法但语义无意义。
未注册的 @property 变量无法插值的根本原因
即使你写了 transition: --theme-color 0.4s，若没在 CSS 顶层用 @property 显式注册，浏览器仍无法插值。注册必须满足三个硬性条件：
-
syntax值必须匹配实际使用类型，比如颜色必须写syntax: '<color>'</color>（引号不能漏） -
initial-value类型必须与syntax一致，initial-value: red合法，initial-value: 'red'（带引号字符串）则失效 - 注册必须是静态 CSS 规则，JS 动态插入
<style>@property ...</style>不触发解析
为什么 var(--x) 绑定的属性能过渡，但变量本身不能
因为过渡发生在「计算后」的原生属性上，不是变量上。例如：
.btn {
background-color: var(--btn-bg);
transition: background-color 0.3s;
}
body.dark { --btn-bg: #121212; }
当 --btn-bg 改变时，background-color 的计算值随之更新，已有 transition 捕捉到这个变化并启动插值。但整个过程里，--btn-bg 自身从未被“过渡”，只是触发器。容易忽略的关键点是：transition 声明必须落在使用该变量的元素上，不能只写在 :root 或父级——否则子元素不继承过渡行为。
Firefox 不支持 @property 时怎么应对
目前只有 Chrome/Edge/Safari 支持 @property，Firefox 完全忽略。这意味着想靠它驱动变量级过渡的方案，在 Firefox 中会退化为瞬时切换。务实做法是：
- 优先用
background-color等原生属性 +var()绑定，兼容性拉满 - 若必须变量级控制且接受降级，加
@supports (animation-timeline: --x)条件包裹@property声明 - 避免在关键动效路径上强依赖
@property，尤其涉及品牌色切换等用户敏感场景
最易被忽略的是：所有参与过渡的颜色值格式必须统一。一边用 #fff，一边用 rgb(255,255,255)，哪怕语义相同，浏览器也会中断插值——这不是 bug，是规范要求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
