只有通过@property注册的自定义属性才能在transition或@keyframes中被真正插值；未注册的css变量仅字符串替换，导致跳变而非平滑过渡。
直接说结论：@property注册的自定义属性，才能在 transition 或 @keyframes 中被真正插值（interpolate）——未注册的 CSS 变量只是字符串替换，过渡时会“跳变”，不是平滑变化。
为什么 --color 写了 transition 却不平滑？
因为浏览器默认把所有未注册的自定义属性当字符串处理。比如：
:root { --brand-color: #3b82f6; }
.button { background-color: var(--brand-color); transition: background-color 0.3s; }
.button:hover { --brand-color: #8b5cf6; }
这段代码中，--brand-color 没有注册，浏览器无法识别它是个 <color></color> 类型，也就无法在两个颜色值之间做线性插值。结果是 hover 瞬间切换，没有过渡。
- 现象：颜色、角度、百分比等值“咔哒”跳变，而非渐变
- 根本原因：CSS 引擎没拿到类型元数据，插值引擎跳过该属性
- 验证方式：DevTools → Styles 面板里看该变量名是否带“registered”小图标（Chrome 125+）
@property 注册语法必须填全三个描述符
@property 不是可选装饰，而是强类型注册指令。缺一不可：
@property --brand-color {
syntax: '<color>';
inherits: false;
initial-value: #3b82f6;
}</color>
-
syntax必须用标准语法字符串，如'<color>'</color>、'<angle>'</angle>、'<percentage>'</percentage>；写成'color'或空字符串会注册失败 -
initial-value必须与syntax类型严格匹配，<color></color>就不能写0，<percentage></percentage>就不能写50（要写50%） -
inherits推荐设为false，除非你真需要子元素继承该变量值（多数设计系统场景下不需要）
transition 要作用在使用变量的属性上，不是变量本身
注册完还不够——过渡声明仍得写在最终生效的 CSS 属性上，比如 background-color、border-image、clip-path 等，而不是 --brand-color：
.button {
--brand-color: #3b82f6;
background-color: var(--brand-color);
/* ✅ 正确：对 background-color 做 transition */
transition: background-color 0.3s ease;
}
.button:hover {
--brand-color: #8b5cf6;
}
- 错误写法：
transition: --brand-color 0.3s—— 浏览器不支持对自定义属性名做 transition - 可动画属性仍受 CSS 规范限制：只有原生可插值属性（如
color、transform、opacity）能参与过渡，注册只是让var(--x)的取值过程可插值 - 响应式场景下，若在媒体查询中改
--brand-color值，同样需要提前注册 + 对下游属性声明transition，否则断点切换仍是跳变
实际响应式过渡中容易忽略的兼容性细节
目前（2026年9月），@property 在 Chrome 110+、Edge 110+、Safari 16.4+ 支持良好，Firefox 仍需前缀 @-moz-document url-prefix() 或暂不支持。但更隐蔽的问题是：
- 注册必须出现在使用变量之前（CSS 顺序敏感），放在
:root最顶部最稳妥 - 如果通过 JS 动态设置
element.style.setProperty('--x', ...)，只要该属性已注册，插值依然生效 - 不要用
all做transition-property：它会尝试过渡所有可动画属性，但未注册变量参与的属性仍跳变，反而掩盖问题 - 调试时发现过渡失效，优先检查 DevTools 中该变量是否显示为 “registered”，而不是只看 CSS 是否写了
transition
真正卡住人的，往往不是“怎么写”，而是“为什么写了却没效果”——绝大多数情况，是漏了 initial-value 类型校验，或 syntax 字符串拼错了一个尖括号。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
