CSS的transition对background-image无效是因规范限制其不可插值，需用background-color+opacity叠加或background-position动画替代。
background-image 渐变过渡为什么无效
CSS 的 transition 默认不作用于 background-image，哪怕你写的是线性渐变——浏览器把它当做一个不可插值的值（identity 类型），直接跳变，看不到过渡效果。这不是写法错，是规范限制。
常见错误现象：background-image: linear-gradient(...) 改变时页面瞬间切换，控制台没报错，开发者工具里也能看到新值已生效，但就是没动画。
- 只有部分 CSS 属性支持过渡插值，
background-image不在其中（[CSS Transitions spec](https://www.w3.org/TR/css-transitions-1/#animatable-properties) 明确列出） - 即使两个渐变结构完全一致（仅颜色不同），依然无法过渡
-
background复合属性写法（如background: linear-gradient(...) #fff）同样失效，本质还是触发了background-image
用 background-color + opacity 模拟渐变过渡
最稳的绕过方式：把渐变“降级”成纯色层叠，靠 background-color 和 opacity 过渡实现视觉近似。适用于背景色变化不剧烈、或允许轻微色差的场景。
- 给容器设两层背景：底层用渐变（固定），上层用半透纯色遮罩（可过渡）
- 只对上层的
background-color和opacity做transition - 例如从蓝紫渐变切到橙红渐变，可让上层从
rgba(100, 100, 255, 0.3)过渡到rgba(255, 120, 50, 0.3)
示例：
立即学习“前端免费学习笔记（深入）”；
div {
background: linear-gradient(45deg, #6a11cb, #2575fc);
position: relative;
}
div::before {
content: '';
position: absolute;
inset: 0;
background-color: rgba(255, 100, 100, 0.2);
transition: background-color 0.4s ease, opacity 0.4s ease;
}
div:hover::before {
background-color: rgba(100, 200, 255, 0.2);
}
用 @keyframes + background-position 做“动效渐变”
如果必须保留真实渐变且要动起来，就别硬刚 transition，改用 @keyframes 配合 background-position 移动渐变起点/终点——这属于“骗眼睛”，但兼容性好、性能高、可控性强。
- 原理：把渐变色轴拉长（比如
linear-gradient(90deg, red, yellow, green, blue)），再通过background-size和background-position控制可视窗口 - 只对
background-position做动画，它是可插值属性 - 注意
background-size要足够宽（至少 300%），否则移出边界会露底色
示例（水平平滑扫过）：
@keyframes slideGradient {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
div {
background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #44b5b1, #feca57);
background-size: 300% 100%;
animation: slideGradient 4s ease-in-out infinite;
}
现代方案：使用 paint API 或 CSS Houdini（需权衡）
Chrome 85+ 支持 CSS Paint API，能用 JS 动态生成渐变并响应属性变化，理论上可实现真正可过渡的渐变。但它不是“开箱即用”的方案。
- 需要注册
paintWorklet，定义一个paint()函数，把颜色参数暴露为自定义属性（如--grad-stop1） - 过渡目标变成这些自定义属性，而非
background-image - 当前兼容性差（Firefox / Safari 无支持），且调试成本高、首屏加载有延迟
- 适合长期维护的内部系统，不适合快速上线或兼容旧版需求
容易被忽略的一点：很多人试了 background-image 过渡失败后，立刻去查“CSS 渐变动画插件”，结果引入一堆运行时 JS 库。其实多数场景，用 background-color + opacity 叠加或 background-position 动画就能解决，更轻、更快、更可控。
