css变量默认不支持transition，因其本质是无类型的字符串容器；必须用@property声明syntax（如""）和inherits才能启用插值动画，且仅chrome/edge/safari部分版本支持。
CSS变量（--my-var）默认不能被transition驱动，直接写transition: --my-var 0.3s完全无效——这不是你写错了，是浏览器根本没把它当“可动画属性”。
为什么transition对--my-var不生效
CSS变量本质是字符串容器，浏览器无法自动判断--bg是颜色、长度还是角度，更不知道两个值之间该怎么插值。比如从#007bff到#ff6b6b，没有类型声明，浏览器就只能跳变，不会做颜色空间混合。
- 常见错误：在
:root里定义--primary: #007bff，然后在元素上写transition: --primary 0.3s——这条声明会被静默忽略 - 即使
background-color: var(--primary)能正常取值，过渡也不会触发 - 不是兼容性问题，而是规范层面的限制：未注册的自定义属性不在CSS动画属性白名单中
必须用@property显式注册才能过渡
@property是告诉浏览器“这个变量有明确类型，允许参与插值”的唯一标准方式。它有两个强制参数，缺一不可：
-
syntax必须写对，例如'<color>'</color>、'<length>'</length>、'<number>'</number>；写成'<int>'</int>或漏掉引号会失效 -
inherits通常设为false；设为true可能引发子元素意外重绘 -
initial-value必须符合syntax类型，比如initial-value: 0px不能简写成0 - 注册必须出现在
<style></style>顶层或外部CSS文件中，JS无法动态插入或修改
正确示例：
@property --theme-color {
syntax: '<color>';
inherits: false;
initial-value: #007bff;
}</color>
怎么安全地配合transition使用
注册之后，变量才真正变成“可过渡属性”，这时transition才能起作用：
- 过渡必须写在**基础状态规则里**，比如
.card { transition: --theme-color 0.4s ease; }，不能只写在:hover中 - 多个变量要分别声明
@property，再在transition中用逗号分隔，例如transition: --x 0.3s, --y 0.3s - 复合值（如
--pos: 10px 20px）无法被解析，必须拆成--x和--y两个独立变量 - 不要依赖
@supports (@property: --x)做完整降级——旧版Safari会误报支持，导致动画静默失败
推荐兜底方式：
.card {
background-color: #007bff; /* fallback */
}
@supports (transition: --theme-color 0.1s) {
.card {
--theme-color: #007bff;
background-color: var(--theme-color);
transition: --theme-color 0.4s ease;
}
.card:hover {
--theme-color: #ff6b6b;
}
}
哪些值类型能用，哪些不能用
syntax支持有限，不是所有CSS值都能注册：
- ✅ 安全可用：
'<color>'</color>、'<length>'</length>、'<number>'</number>、'<angle>'</angle>、'<time>'</time> - ❌ 明确不支持：
'<image>'</image>、'<url>'</url>、'<custom-ident>'</custom-ident>、函数类值（如linear-gradient()本身） - ⚠️ 渐变动画可行，但必须把其中可变部分（如半径、位置）抽成单独变量，并用对应
syntax注册 - Firefox至今（2026年5月）仍不支持
@property，且无明确落地时间表
真正容易被忽略的是：注册后变量类型就锁死了。如果某处不小心赋了非法值（比如给--theme-color赋12px），整个过渡会静默退化为跳变，连控制台都不会报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
