CSS 的 transition 对 background-image（含 linear-gradient）完全无效，因规范将其列为不可动画属性；可用 background-position 位移模拟流动效果或伪元素 opacity 淡入淡出实现视觉过渡。
CSS 的 transition 对 background-image（包括 linear-gradient()）完全无效，不是你写错了，是规范明确禁止插值——浏览器压根不支持在两个渐变之间算中间帧。
为什么 background-image 不能 transition
W3C 规范把 background-image 列为「不可动画属性」，哪怕两个渐变结构一模一样、只差一个颜色值，浏览器也只会瞬间替换，不会过渡。你在开发者工具里能看到新值已生效，但动画栏里根本没帧，transition: background 0.3s 或 transition: background-image 0.3s 都被静默忽略。
-
background是复合属性，触发的是background-image的赋值，不是插值 - 渐变本质是图像值（
<image></image>类型），而 CSS 插值只支持颜色、长度、数字等可线性计算的类型 - 即使你用
background-color过渡，它也只影响纯色层，对渐变毫无作用
用 background-size + background-position 模拟“流动渐变”
这不是真过渡渐变，而是靠移动一个超宽渐变的可视窗口，制造“颜色扫过”的错觉。它性能好、兼容性高，且只依赖可插值的 background-position。
- 必须设
background-size: 300% 100%（或更大），否则移出范围就露底色 -
background-position要从0% 50%移到100% 50%才能平滑横扫；竖向用50% 0%→50% 100% - 渐变色数建议 ≥3，避免两色拉伸后出现明显色带；例如
linear-gradient(90deg, #ff8a00, #e52e71, #ff0000, #e52e71, #ff8a00) - 慎用
background-clip: text配合此法——文字边缘易因 position 微小偏移而闪烁
用伪元素 + opacity 实现淡入淡出效果
这是最接近“真过渡”的方案：底层固定一个渐变，上层伪元素带另一个渐变，只对 opacity 做 transition。视觉上就是新渐变淡入、旧渐变淡出。
立即学习“前端免费学习笔记（深入）”；
- 伪元素必须
position: absolute; inset: 0; z-index: -1，否则可能遮挡内容或触发重排 - 不要给伪元素设
border-radius单独写，应和父容器一致，否则 hover 时圆角会错位 - 若父容器有
overflow: hidden，伪元素需加will-change: opacity防止 Safari 下闪屏 - 过渡时长建议 0.3s–0.6s：
transition: opacity 0.4s ease-out比ease更自然，起始稍快、结束更稳
真正麻烦的不是怎么选方案，而是忘记伪元素默认 content: '' 必须存在——漏写这行，整个遮罩就失效，还查不出原因。
