为什么CSS transition不能直接过渡linear-gradient

background-image 不可动画因 W3C 将其归为不可插值属性，linear-gradient() 作为 <image> 类型无中间帧计算；background-color 过渡不影响渐变主体；@property 方案受限于浏览器兼容性与语法约束。

transition: background-image 为什么静默失效

浏览器按 W3C 规范将 background-image 归为「不可动画属性」，linear-gradient() 解析为 <image> 类型，而该类型不定义插值规则——它压根不会计算中间帧，只做瞬时替换。写了 transition: background-image 0.3s 或 transition: background 0.3s，DevTools 里能看到新值生效，但动画时间轴空空如也，控制台也不会报错或警告。

为什么 background-color 过渡对渐变没用

background-color 只影响纯色层，完全不参与 linear-gradient() 的渲染流程。即使你给同一个元素同时设了 background-color: #fff 和 background-image: linear-gradient(...)，过渡 background-color 也只会让底层色变化，上层渐变图仍是硬切。

1. 渐变的视觉主体是 background-image，不是 background-color
2. 写 transition: background 0.3s 会重置 background-position 和 background-size，反而破坏位移动画基础
3. 混用简写和独立属性（比如先设 background-size: 400% 400%，再 hover 时用 background: linear-gradient(...)）会导致之前设置被清空

@property + CSS 变量方案的现实限制

Chrome 111+、Safari 16.4+ 支持用 @property 声明可动画的自定义颜色变量，并注入 linear-gradient(var(--a), var(--b)) 实现真正渐变过渡。但它在 Firefox 中至今（2026年中）仍不支持，且要求：

1. @property 必须显式声明语法类型，例如 syntax: "<color>"
2. 变量必须直接用于 background-image，不能套在 calc() 或其他函数里
3. 不能和 mix()、color-mix() 混用，否则插值中断

最容易被忽略的兼容性断点

所谓“现代浏览器支持渐变过渡”，实际仅指 Chrome/Firefox/Safari 对 @property 的部分实现，而非对 background-image 本身开放插值。iOS Safari 对 color-mix(in lch, ...) 的支持虽已上线，但若渐变中混入任何 rgba() 或未指定停靠点位置（如缺 0%, 50%, 100%），就会退回到 sRGB 插值，中间立刻发灰。真正在生产环境跑通，得同时守住三道线：变量声明格式、停靠点密度、颜色空间一致性。