直接动画CSS自定义属性会失败，因为浏览器默认不识别其类型，--color等字符串值无法插值，导致跳变；须用@property声明syntax: "<color>"等类型信息才能实现平滑过渡。
为什么直接动画 CSS 自定义属性会失败
因为浏览器默认不识别自定义属性的类型，--color 这种纯字符串值无法插值——动画帧之间拿不到中间色值，最终表现为“跳变”或完全不动。你看到的不是渐变，是起点色闪一下变成终点色。
解决路径只有一条：用 @property 显式声明该变量为 color 类型，并提供初始值。
-
@property必须在 CSS 文件顶层（不能嵌套在媒体查询或选择器内）声明 - 必须指定
syntax: "<color>"，注意尖括号是语法要求，不是占位符 -
inherits: false是安全默认值；设为true仅当你真需要子元素继承该变量的动画状态时才用
如何正确声明并动画一个颜色变量
以下是最小可行写法：
/* 全局声明，放在 :root 或任意顶层 */
@property --theme-color {
syntax: "<color>";
inherits: false;
initial-value: #3b82f6;
}
<p>.element {
--theme-color: #3b82f6;
background-color: var(--theme-color);
transition: --theme-color 0.3s ease;
}</p><p>.element:hover {
--theme-color: #ef4444;
}关键点：
立即学习“前端免费学习笔记（深入）”；
- 动画生效的前提是：目标属性（这里是
--theme-color）被用于支持动画的 CSS 属性（如background-color、color），且该属性本身支持过渡/动画 - 不能对
var(--theme-color)做 transition，必须对自定义属性本身（--theme-color）设 transition - 若用
@keyframes，同样要动画--theme-color，而不是它的计算结果
哪些颜色格式能被 @property 正确解析
syntax: "<color>" 支持所有标准 CSS 颜色表示法，但有隐含限制：
- ✅
#3b82f6、rgb(59, 130, 246)、hsl(210, 90%, 50%)、rebeccapurple - ✅
transparent（等价于rgba(0,0,0,0)） - ❌
currentcolor—— 不是具体颜色值，无法插值 - ❌
color(display-p3 ...)等色彩空间函数 —— 目前多数浏览器尚未支持插值 - ⚠️
rgba(59, 130, 246, 0.8)和hsla(...)可用，但 alpha 通道会独立插值，需留意是否符合预期
和传统 color 动画相比的实际差异
表面上看只是把 background-color 换成变量，但底层行为不同：
- 传统动画直接驱动渲染属性，
@property动画驱动的是变量值，再经 CSS 引擎重新计算依赖链 —— 这意味着如果变量被多个属性使用（比如同时影响color和border-color），它们会同步变化，无需重复写 transition - 性能上无本质优势，甚至略低（多一层变量求值）；但可维护性提升明显——改一处变量，所有引用自动更新
- 兼容性仍是硬伤：
@property在 Safari 16.4+ 才开始支持，旧版 Safari 和所有 IE 完全不认；上线前务必检查CSS.supports('property', '--x')
真正容易被忽略的是：一旦用了 @property，你就不能再靠 JavaScript 直接读取 getComputedStyle(el).getPropertyValue('--theme-color') 获取实时插值中的中间色——它只返回起始或结束值。需要中间态，得用 element.animate() + onupdate 或监听 transitionrun 事件手动采样。
