CSS变量默认不支持transition，因浏览器无法推断其类型和插值方式；需用@property声明syntax（如<color>）和inherits才能实现过渡，且仅Chrome 93+/Edge 93+/Safari 15.4+支持。
CSS变量默认不支持transition，直接写transition: --color 0.3s完全无效
为什么--my-var不能直接过渡
CSS变量本质是“字符串容器”，浏览器无法自动推断它的类型（是颜色？长度？角度？），更不知道起始值和结束值之间如何插值。所以即使你改了--bg的值，background-color会立刻跳变，不会缓动。
常见错误现象：:root { --primary: #007bff; } .btn { background-color: var(--primary); transition: --primary 0.3s; } —— 这段代码里transition实际被忽略，毫无动画效果。
必须显式告诉浏览器：“这个变量代表一个颜色”，它才能参与颜色空间插值。
立即学习“前端免费学习笔记（深入）”；
@property必须声明inherits和syntax
定义可过渡的CSS变量，@property两个参数缺一不可：
-
syntax：指定变量值类型，比如<color>、<length>、<number>，不支持<image>或<custom-ident> -
inherits：决定是否继承（通常设为false，除非你真需要子元素继承该变量的动画状态）
正确写法示例：
@property --theme-color {
syntax: '<color>';
inherits: false;
initial-value: #007bff;
}
之后就可以安全地对它做过渡：
.card {
--theme-color: #007bff;
background-color: var(--theme-color);
transition: --theme-color 0.4s ease-in-out;
}
.card:hover {
--theme-color: #ff6b6b;
}
兼容性与降级方案要手动处理
@property目前在 Safari 15.4+、Chrome 93+、Edge 93+ 支持，Firefox 仍不支持（截至2026年4月）。没有兜底，transition就会静默失效。
建议做法：
- 用
@supports (@property: --x) { ... }包裹新写法 - 在外层保留传统类切换方案作为 fallback，例如
.card.is-dark { background-color: #333; } - 避免依赖
@property做核心交互，仅用于增强体验
不要指望 JS 检测后动态插入 @property 规则——它只能出现在 CSS 文件或 <style> 标签顶层，且不可通过 JS 修改。
性能影响比想象中低，但别滥用
只要变量类型明确（尤其是<color>和<length>），浏览器能走合成层优化，帧率稳定。实测 20 个元素同时过渡--scale（syntax: <number>）在中端手机上无卡顿。
但注意两点：
- 每个
@property定义都会增加样式计算开销，全局只定义真正需要过渡的变量，别一口气定义--padding-xs到--padding-xl -
syntax: '*'（通配）不触发过渡，必须写具体类型
最易被忽略的是initial-value必须与syntax匹配，否则整个@property规则会被浏览器丢弃——比如initial-value: 'auto'配<color>就无效。
