CSS变量不能直接过渡，因浏览器将其视为无类型字符串，不支持插值；必须用@property注册类型（如<color>、<length>）并transition变量本身，否则transition: --x无效。
因为浏览器把未注册的自定义属性（如 --bg-gradient）当作纯字符串处理，根本不知道它代表渐变色，也就无法计算中间帧插值——transition: --bg-gradient 0.3s 实际上被静默忽略。
为什么 transition 对未注册的自定义属性无效
浏览器 CSS 引擎在解析动画时，只对「已知可动画类型」的属性做插值：比如 opacity 是数字、color 是颜色、transform 是矩阵。而 --xxx 默认是无类型的 token，哪怕你写成 --gradient: linear-gradient(...)，它在引擎眼里仍是“一整段不可拆解的字符串”，不能像 color 那样逐通道混合。
常见错误现象包括：
-
transition: --bg-gradient 0.3s完全没动画，hover 时颜色突变 - DevTools 的 Styles 面板里看不到该变量旁的「动画图标」
-
CSS.supports('property', '--bg-gradient')返回false
@property 必须声明 syntax 才能启用插值
只有显式用 @property 告诉浏览器“这个变量是颜色/长度/角度”，它才会启用对应类型的插值算法。渐变本身不是基础类型，但构成渐变的各部分可以是：
立即学习“前端免费学习笔记（深入）”；
- 颜色停点（
syntax: "<color>"）→ 支持 RGB/HSL 通道线性插值 - 角度（
syntax: "<angle>"）→ 支持0deg → 360deg连续插值 - 长度（
syntax: "<length>"）→ 支持10px → 0.5em单位归一化后插值
例如径向渐变缩放，必须抽离半径为独立变量并注册：
@property --radius {
syntax: "<length>";
inherits: false;
initial-value: 20px;
}
然后在 radial-gradient(#000 var(--radius), transparent) 中使用 —— 这样浏览器才知道该对 --radius 做数值插值，而非尝试解析整个渐变字符串。
即使注册了，transition 也必须作用于变量本身
这是最常踩的坑：过渡必须写在自定义属性名上，不能写在依赖它的样式属性上。
- ✅ 正确：
transition: --hue 0.4s, --saturation 0.4s - ❌ 错误：
transition: background-color 0.4s（background-color: hsl(var(--hue), var(--saturation), 50%)不会触发插值） - ❌ 错误：
transition: background-image 0.4s（background-image: linear-gradient(hsl(...), hsl(...))仍属不可动画属性）
原因在于：浏览器只监听注册过的变量值变化，并按其 syntax 类型执行插值；一旦绕过变量直接操作派生属性，就退回到无类型字符串赋值逻辑。
Firefox 和 Safari 的兼容性现实
Chrome/Edge 已全面支持 @property（2026 年稳定版），但 Firefox 仍需手动开启 layout.css.property-support.enabled 标志，Safari 则完全不支持 @property 的 <color> 插值（仅支持 <number> 和 <angle>）。这意味着：
- 用
--bg-hue+--bg-saturation做 HSL 渐变动画，在 Safari 中会 fallback 为跳变 - 想保底，得搭配伪元素 +
opacity或background-position流动方案 -
@property不是银弹，它解决的是“类型缺失”问题，不是“浏览器支持鸿沟”问题
真正容易被忽略的点是：@property 注册必须发生在任何使用该变量的样式规则之前，且不能放在 @media 或嵌套规则内——否则注册失败，连 CSS.supports() 都返回 false。
