background-image 不可动画因 W3C 将其归为不可插值属性，linear-gradient() 作为 类型无中间帧计算；background-color 过渡不影响渐变主体；@property 方案受限于浏览器兼容性与语法约束。
transition: background-image 为什么静默失效
浏览器按 W3C 规范将 background-image 归为「不可动画属性」，linear-gradient() 解析为 <image></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 也只会让底层色变化，上层渐变图仍是硬切。
- 渐变的视觉主体是
background-image，不是background-color - 写
transition: background 0.3s会重置background-position和background-size，反而破坏位移动画基础 - 混用简写和独立属性（比如先设
background-size: 400% 400%，再 hover 时用background: linear-gradient(...)）会导致之前设置被清空
@property + CSS 变量方案的现实限制
Chrome 111+、Safari 16.4+ 支持用 @property 声明可动画的自定义颜色变量，并注入 linear-gradient(var(--a), var(--b)) 实现真正渐变过渡。但它在 Firefox 中至今（2026年中）仍不支持，且要求：
-
@property必须显式声明语法类型，例如syntax: "<color>"</color> - 变量必须直接用于
background-image，不能套在 calc() 或其他函数里 - 不能和
mix()、color-mix()混用，否则插值中断
最容易被忽略的兼容性断点
所谓“现代浏览器支持渐变过渡”，实际仅指 Chrome/Firefox/Safari 对 @property 的部分实现，而非对 background-image 本身开放插值。iOS Safari 对 color-mix(in lch, ...) 的支持虽已上线，但若渐变中混入任何 rgba() 或未指定停靠点位置（如缺 0%, 50%, 100%），就会退回到 sRGB 插值，中间立刻发灰。真正在生产环境跑通，得同时守住三道线：变量声明格式、停靠点密度、颜色空间一致性。
立即学习“前端免费学习笔记（深入）”；
