CSS transition不支持background-image（含linear-gradient）动画，因W3C规范将其列为不可插值的类型；可用background-position位移超大渐变、伪元素opacity淡入淡出或rgba遮罩过渡等方案模拟视觉平滑效果。
因为 background-image（包括 linear-gradient()）本身不支持 CSS transition 插值，这不是你写错了，是浏览器规范明确禁止的。
为什么 background-image 不能用 transition
CSS 规范将 background-image 归类为不可插值类型（<image></image>），哪怕两个 linear-gradient() 结构完全一致、只差一个颜色值，浏览器也只会“跳变”，不会计算中间帧。你在 DevTools 里看到新值已生效，但动画根本没启动——这是预期行为，不是 bug。
- Chrome 120+ 开始实验性支持，但需用户关闭
prefers-reduced-motion，且不稳定，生产环境不可依赖 - Safari 直到 16.4 才放开有限支持，Firefox 仍完全忽略
transition: background-image - 写成
transition: background也没用，因为简写会隐式触发background-image，照样失效
怎么让渐变“看起来”平滑过渡
绕过限制的核心思路：不动渐变本身，动它能被动画的“邻居”属性。
- 用
background-position移动一个超宽渐变背景（background-size: 200% 200%），视觉上像颜色在流动——兼容性好、性能高、无兼容陷阱 - 用伪元素
::before叠一层不同渐变，靠opacity切换显示/隐藏，只动画opacity（IE11+ 支持） - 把渐变当底层，上层加
rgba()遮罩，只对遮罩的background-color和opacity做transition，适合明暗微调场景
为什么改用 hsl() 还是断层
HSL 不是银弹。断层主因是 RGB 位深限制（8bit/channel）+ 浏览器插值算法 + 显示器渲染共同导致的色带，不是颜色写法问题。
立即学习“前端免费学习笔记（深入）”；
- 直接把
#3498db → #2ecc71换成hsl(200, 70%, 40%) → hsl(140, 70%, 45%)只有在l（亮度）线性变化、h和s微调时才有效；跨色环或大步调h值反而更跳 - 真要压色带，得加噪点（SVG data URL）、放大渐变背景（
background-size: 300% 300%）、或启用will-change: background-position - 别信“加更多色标就能平滑”——多设
color-stop只会让计算更重，断层照旧
最易被忽略的一点：background-position 动画必须配 background-size: 200% 200% 以上，否则位移范围太小，动画就卡在几像素内抖动，你以为是性能问题，其实是尺寸没拉够。
