background-image 无法直接过渡，因 CSS 规范禁止对 类型插值；需用 @property 声明 --grad-start 和 --grad-end 等可动画变量，并在 transition 中指定这些变量。
直接用 background-image 过渡渐变会完全失效——这不是你写错了，是 CSS 规范本身禁止对 <image></image> 类型插值。真正能平滑过渡的，只有被 @property 显式声明为可动画类型的自定义属性。
为什么 transition: background-image 无效
浏览器看到 linear-gradient(45deg, red, blue) 和 linear-gradient(45deg, green, purple) 两个字符串，不会尝试“混合”它们，而是直接跳变。这不是 bug，是规范行为。DevTools 里能看到 transition 属性灰掉，CSS.supports('property', '--x') 返回 false 就说明注册失败。
-
syntax必须带引号、小写、尖括号完整，比如"<color>"</color>，写成"color"或<color></color>都不认 -
inherits: false缺失会导致变量在子元素中被继承覆盖，动画中断 -
initial-value必须是合法值，currentcolor或未定义变量会静默失败
线性渐变颜色过渡的最小可行写法
要让起点色和终点色都平滑变化，必须分别声明两个可动画变量，并在 background 中用 var() 引入：
@property --grad-start { syntax: "<color>"; inherits: false; initial-value: #ff6b6b; }
@property --grad-end { syntax: "<color>"; inherits: false; initial-value: #4ecdc4; }
.gradient-box {
background: linear-gradient(45deg, var(--grad-start), var(--grad-end));
transition: --grad-start 0.5s ease, --grad-end 0.5s ease;
}
.gradient-box:hover {
--grad-start: #4ecdc4;
--grad-end: #ff6b6b;
}
注意：transition 必须写在 --grad-start 和 --grad-end 上，而不是 background；hover 时改的是变量值，不是 background 声明本身。
立即学习“前端免费学习笔记（深入）”；
径向渐变半径缩放的避坑要点
想让 radial-gradient(circle, #000 10px, transparent) 中的 10px 平滑缩到 2px，不能直接动数字，得抽成变量并声明类型：
-
syntax: "<length>"</length>是硬性要求，"px"或"number"都不行 - 终值别设
0px，部分浏览器渲染异常，用0.7px更稳 - 如果用在伪元素上，记得加
background-clip: padding-box防边框干扰
Firefox 当前（v128）仍不支持 @property，要用 @supports (animation-name: test) and (not (property: --test)) 检测并降级到 font-size 模拟方案。
最关键的细节藏在声明里：少一个引号、错一个大小写、漏一个 inherits: false，动画就退化成跳变——它不会报错，只会沉默失效。
