background-image不可动画，因W3C规范将其列为不可插值属性；仅linear-gradient内颜色值（需@property注册为）或background-position等可过渡属性能实现平滑效果。
为什么直接 transition background-image 没用
因为 background-image 是 CSS 规范中明确标记为「不可动画」的属性，浏览器不对其做插值计算。你写 transition: background-image 0.3s，实际只是起点和终点硬切——没有中间帧，控制台也不报错，容易误以为“动了”，其实是强制重绘造成的闪跳。
@property 必须注册 color 类型才能驱动颜色过渡
想让渐变中的颜色平滑变化，不能靠变量拼字符串，必须让浏览器知道这个变量是可插值的颜色值：
-
syntax: "必须带尖括号、小写、加引号；写成" "color"或"都会失效" -
inherits: false是硬性要求，颜色变量一般不继承，设为true会导致子元素动画中断 -
initial-value必须是合法颜色值，如#667eea、hsl(220, 80%, 60%)，不能是red或currentcolor - 注册必须放在
:root或全局作用域，且要在任何使用前声明，否则CSS.supports('property', '--grad-color')返回false
transition 必须作用于变量本身，而非 background-color
常见错误是给 background-color 加 transition，但变量值变化时它根本不会响应：
- ✅ 正确：
transition: --grad-color 0.4s ease+background-color: var(--grad-color) - ❌ 错误：
transition: background-color 0.4s，即使background-color用了var(--grad-color)，浏览器也无法反向追踪变量变化 - 变量修改必须通过伪类（如
:hover）或 JS 直接赋值（el.style.setProperty('--grad-color', '#ef4444')），不能靠间接样式链触发
linear-gradient 内部颜色能动，但方向/色标位置不能
现代浏览器（Chrome 110+ / Safari 16.4+）支持对 linear-gradient() 中的 color 值做离散过渡，但仅限颜色本身：
- ✅ 可行：
background-image: linear-gradient(to right, var(--c1), var(--c2))，其中--c1和--c2均为 - ❌ 不可行：
linear-gradient(var(--angle), ...)，--angle即使注册为 - ❌ 不可行：
red 0%, blue var(--stop)，色标位置不是独立可插值维度，整条background-image值仍被当字符串处理
真正稳定的渐变动画，要么靠 @property 驱动颜色变量（仅限颜色），要么退回到 background-position 位移方案——后者兼容性更好，也更容易避开 @property 在 Firefox 和旧版 Safari 中缺失的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
