不支持，除非用@property显式注册并声明类型；浏览器将未注册的自定义属性当字符串处理，无法插值，transition无效；@property需写全syntax、inherits、initial-value三项且格式严格；过渡必须直接作用于变量名而非计算属性；firefox不支持，chrome/edge 100+、safari 16.4+部分支持。
不支持，除非你用 @property 显式注册并声明类型。
为什么 transition: --x 0.3s 完全没反应
浏览器把未注册的自定义属性（比如 --opacity: 0.5）当纯字符串处理，根本不会尝试插值。它连“这是个数字”都识别不出来，更别说计算中间帧了。你写的 transition 语法没错，但目标属性压根不在可动画列表里——这不是 bug，是 CSS 规范行为。
常见症状包括：
- 悬停后颜色/尺寸直接跳变，毫无过渡
-
calc(var(--scale) * 100px)在 JS 修改变量后计算中断或报错 - DevTools 里看到变量值变了，但视觉毫无响应
@property 必须写全三项才生效
漏掉 syntax 或 inherits，或者值写错，@property 就退化为普通变量声明，动画能力归零。控制台还不报错，极难排查。
正确写法示例：
@property --bg-hue {
syntax: "<number>";
inherits: false;
initial-value: 220;
}</number>
-
syntax必须带引号、尖括号、小写，如"<number>"</number>、"<color>"</color>，不能写成"color"或<number></number> -
initial-value类型必须严格匹配syntax：写<length></length>就得是0px，不是0 -
inherits: false是常规选择；设为true可能导致子元素意外继承并触发多余重绘
过渡必须作用于变量本身，不能绕道
动画要起效，transition 的目标必须是那个被 @property 注册过的变量名，而不是它参与计算出的样式属性。
✅ 正确：
.box {
background-color: var(--theme-color);
transition: --theme-color 0.4s ease;
}
.box:hover { --theme-color: #ef4444; }
❌ 错误：
.box {
background-color: var(--theme-color);
transition: background-color 0.4s ease; /* 浏览器无法反推变量变化，插值失败 */
}
- Firefox 目前不支持
@property，别指望它能跑通 - Chrome/Edge 100+、Safari 16.4+ 支持，但 Safari 对
<color></color>插值兼容性略弱 - 复合值（如
--pos: 10px 20px）无法被解析为可动画值，必须拆成--x和--y
真正麻烦的不是写法，而是所有环节都要严丝合缝：注册时类型对、初始值对、继承设对；使用时 transition 写对变量名、JS 修改时传的值也得符合 syntax。漏一环，动画就静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
