必须用@property显式注册--theme-color，syntax需为""，inherits:false，initial-value为合法颜色值，且transition要直接作用于变量名而非background-color。
必须显式注册类型、写对 syntax 引号格式、且 transition 要直接作用在变量名上，否则颜色只会跳变，不会过渡。
为什么 --color 加了 transition 还是不动画？
浏览器默认把所有自定义属性当字符串处理，--theme-color: #3b82f6 和 --theme-color: #ef4444 之间没有插值逻辑。即使你写了 transition: --theme-color 0.3s，只要没用 @property 注册，这行就完全无效——DevTools 里也看不到动画图标，控制台更不会报错。
- 常见错误现象：鼠标悬停后背景色“啪”一下切换，中间无过渡帧
- 根本原因：
CSS.supports('property', '--theme-color')返回false，说明注册失败或未注册 - 最容易漏掉的点：syntax 值必须是带引号的
"<color>"</color>，写成"color"或<color></color>（无引号）都会失效
@property 注册颜色变量的三要素缺一不可
只有三项全对，浏览器才真正把该变量识别为可动画的颜色类型：
-
syntax: "<color>"</color>：尖括号是字面量，小写，必须加英文双引号 -
inherits: false：颜色变量一般不继承，设为true会导致子元素动画意外中断 -
initial-value: #3b82f6：必须是合法颜色值，不能是currentcolor或空值
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
@property --theme-color {
syntax: "<color>";
inherits: false;
initial-value: #3b82f6;
}
过渡必须写在变量名上，不能写在 background-color 上
很多人误以为给元素加 transition: background-color 0.3s 就能响应变量变化，这是错的。变量变了，background-color 的计算值才变，但过渡绑定的是“声明值”，不是“计算结果”。
- ✅ 正确：写
transition: --theme-color 0.3s，并在样式中用background: var(--theme-color) - ❌ 错误：写
transition: background-color 0.3s，即使background-color是由var(--theme-color)计算而来 - 注意作用域：变量必须在当前选择器作用域内被读取，比如
:root里注册，但只在.btn里用var(--theme-color)，那transition: --theme-color就得写在.btn规则里，不能只挂在:root
兼容性与降级要提前想好
截至 2026 年 10 月，Chrome 100+、Edge 101+、Safari 15.4+ 支持稳定，但旧版 Safari 或某些安卓 WebView 仍可能完全忽略 @property。这时候动画会静默失效，变成硬切。
- 不要依赖 JS 检测后再插入 CSS —— 那会引发 FOUC；推荐用
@supports (property: --x)包裹整段动画规则 - 如果必须支持老环境，
background-color本身仍要写一个 fallback 值（比如直接写死#3b82f6），否则没注册时整个背景可能空白 - 多个颜色变量（如渐变起点/终点）要分别注册，漏一个，整条渐变就卡住 —— 这点非常容易被忽略
