CSS transition 无法直接平滑过渡 background-color 到 linear-gradient，因二者属不同属性；应统一用渐变并仅动画 color-stop 颜色，或用伪元素 + opacity 过渡确保兼容性。
transition 不能直接过渡 background-color 到 linear-gradient
很多人试过给 background-color 加 transition，再换成 background: linear-gradient(...)，结果发现颜色“跳变”而非平滑过渡——因为 CSS 不支持在纯色和渐变之间插值。浏览器把 background-color 和 background-image 当作两个完全不同的属性，而 linear-gradient() 属于 background-image，无法被 transition 自动补间。
可行思路是：统一用渐变，只过渡渐变中的颜色停止点（color stop）或透明度，或者用伪元素叠加 + opacity 过渡。
- 最稳妥的做法是始终使用
background-image: linear-gradient(...)，通过改变其中的color-stop颜色值来触发过渡（需确保所有 stop 位置固定，仅改颜色） - 若必须从单色开始，可用
::before伪元素覆盖一层渐变，再对伪元素的opacity做transition - 注意：Chrome 120+ 开始支持
transition直接作用于background-image中的 color stop（实验性），但 Safari 和 Firefox 尚未跟进，生产环境慎用
用 color stop + transition 实现真渐变过渡
只要所有渐变的位置参数（如 0%、100%）不变，只改颜色值，现代浏览器就能平滑过渡。关键在于写法要“可动画”：
.box {
background-image: linear-gradient(45deg, #ff6b6b 0%, #4ecdc4 100%);
transition: background-image 0.4s ease;
}
.box:hover {
background-image: linear-gradient(45deg, #ffd166 0%, #06d6a0 100%);
}
这段代码在 Chrome/Firefox/Edge 中有效；Safari 16.4+ 也支持，但 Safari 15 及更早版本会 fallback 为跳变。
立即学习“前端免费学习笔记（深入）”；
- 必须显式写出角度（如
45deg），不能用to right等关键词（部分旧版 Safari 不识别） - stop 位置必须用百分比或长度单位（
0%、100%），不能用from/to - 避免混用透明色（如
rgba(255,0,0,0.5)）和不透明色，alpha 通道变化可能引发渲染抖动
兼容老浏览器的伪元素叠加方案
当需要支持 Safari 15 或 Android WebView 旧内核时，用 ::before 叠加一层带 opacity 过渡的渐变层更可靠：
.box {
position: relative;
background-color: #f8f9fa;
}
.box::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
opacity: 0;
transition: opacity 0.4s ease;
}
.box:hover::before {
opacity: 1;
}
这样初始状态是纯色背景，悬停后渐变层淡入，视觉上就是“颜色过渡”。
- 注意
inset: 0替代top/left/bottom/right: 0，更简洁且兼容性一致 - 如果容器有圆角（
border-radius），需在::before上也加相同值，否则渐变边缘会溢出 - 该方案不依赖
background-image动画能力，兼容性覆盖到 iOS 12+/Android 6+
不要忽略 performance 和重绘开销
渐变过渡看着轻量，但频繁触发动画仍可能掉帧，尤其在低端安卓设备上：
- 避免在
scroll或mousemove中动态修改渐变颜色——这会强制每帧重绘background-image - 用
will-change: background-image可能适得其反；更推荐对伪元素方案加will-change: opacity（GPU 加速更稳定） - 如果过渡只需一次（比如页面加载后淡入），优先用
@keyframes+animation，比 hover 触发的transition更可控
真正难的不是写出来，而是判断该用哪条路：要不要保老版本？动画是否高频？设计师给的色值是否含透明度？这些细节比语法本身更容易让效果翻车。
