css transition 对 background-image（含 linear-gradient）完全无效，因 w3c 将其列为不可动画属性，浏览器不计算中间帧；可靠替代方案包括 background-position + background-size 模拟流动、伪元素 opacity 淡入淡出、或 @property 驱动颜色插值。
CSS transition 对 background-image（含 linear-gradient()）完全无效，不是写法错，是规范级限制——浏览器压根不计算中间帧。
为什么 transition: background 或 transition: background-image 没反应
写了 transition: background 0.3s，hover 时背景却“啪”一下跳变，DevTools 看到新值已生效，但动画 timeline 里空空如也。这不是兼容性问题：
-
background-image被 W3C 明确列为「不可动画属性」，linear-gradient()解析为<image></image>类型，无法线性插值 - 即使两个渐变只差一个颜色（如
#ff0000→#00ff00），浏览器也只会替换，不会过渡 -
transition: background-color对渐变零作用——它只影响纯色层，不参与渐变渲染 - 控制台静默忽略，不报错、不警告
用 background-position + background-size 模拟流动效果
这是最轻量、兼容性最好、性能可控的方案：把渐变画布拉大，再移动“窗口”，视觉上就是颜色在流动。
-
background-size必须 ≥200%（推荐400% 400%；太大增加 GPU 压力） - 必须显式声明初始
background-position，例如background-position: 0% 50%，否则部分浏览器不触发 transition - 若
background-size: 400% 400%，hover 时设为background-position: 100% 50%（横向扫过）或50% 100%（纵向） - 避免在
background简写中混写固定值和变量；拆成background-image、background-size、background-position单独声明更稳
用伪元素 + opacity 实现淡入淡出
这是最接近“真过渡”的视觉方案：底层固定旧渐变，上层伪元素覆盖新渐变，只对 opacity 做 transition。
- 伪元素必须带
content: ""，漏写就失效，且无提示 -
position: absolute; inset: 0; z-index: -1是基本配置，否则可能遮挡内容或触发重排 - 若父容器有
overflow: hidden，建议给伪元素加will-change: opacity，防止 Safari 下闪屏 - 过渡时长建议
0.3s–0.6s，ease-out比ease更自然：起始稍快，结束更稳 - 不要单独给伪元素设
border-radius，应与父容器一致，否则 hover 时圆角会错位
用 @property 驱动颜色插值（现代方案）
当你要真正过渡渐变里的颜色值（比如起始色、终止色），而不是整个图像，@property 是唯一能让浏览器做数值插值的方式。
- 必须先注册可动画的 CSS 变量：
@property --grad-start { syntax: "<color>"; inherits: false; initial-value: #ff0000; }</color> - 渐变中用
var(--grad-start)替代硬编码颜色，再对变量本身做transition: --grad-start 0.4s - 仅支持 Chrome 110+ / Edge 110+ / Safari 16.4+；Firefox 尚未实现
- 注意：变量名必须全小写、中划线分隔，且
syntax声明必须精确匹配类型（<color></color>、<length></length>等）
最容易被忽略的一点：所有方案都依赖图片/渐变资源提前加载完成。没 preload 或没监听 img.onload，过渡开始时大概率先闪白屏——这不是 CSS 问题，是资源调度没跟上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
