background-image 不可过渡，因浏览器无法插值不同渐变图；可用 background-position 位移、opacity 切换图层或 color-mix() 实现平滑效果。
transition 作用在 background-image 上为什么无效
直接对 background-image 使用 transition 不会触发渐变动画，因为 CSS 规范明确将 background-image 列为「不可过渡属性」。浏览器无法插值两张不同渐变图（比如 linear-gradient(red, blue) 和 linear-gradient(green, yellow)）之间的中间状态。
- 可用替代方案是过渡
background-color或使用两个重叠的div分别控制渐变层与透明度 - 若必须切换渐变，推荐用
opacity配合z-index切换两层渐变容器 - 部分现代浏览器（Chrome 110+）支持
background简写过渡，但行为不一致，不建议依赖
用 background-position 实现平滑渐变位移动画
当渐变本身固定、只需“移动”视觉效果时，background-position 是最轻量且可过渡的属性。它能产生类似流动光效或悬停扫光的效果，且无重绘开销。
button {
background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #44b5b1);
background-size: 200% 200%;
transition: background-position 0.4s ease;
}
button:hover {
background-position: 100% 100%;
}
-
background-size必须设为大于 100%（如200% 200%），否则位移无可见变化 - 过渡时间不宜低于
0.2s，否则人眼感知为跳变；超过0.6s易显拖沓 - 避免同时过渡
background-position和opacity，可能触发合成层频繁切换，造成卡顿
color 与 border-color 的过渡天然流畅，但有隐含限制
color、border-color、background-color 这类颜色属性默认支持过渡，但实际流畅性取决于颜色空间插值方式：浏览器统一按 sRGB 插值，导致某些色域（如蓝→紫）中间出现灰浊感。
- 想更自然，改用
color-mix()（Chrome 111+ / Safari 16.4+）配合@property自定义属性控制，实现 LCH 或 OKLCH 空间过渡 - 旧项目兼容方案：预设 3–5 个关键帧色值，用
@keyframes+animation替代transition - 避免在
transition中混用命名色（如red）和十六进制（如#ff0000），可能导致插值路径意外偏移
硬件加速与 will-change 对渐变过渡的实际影响
给渐变容器加 will-change: background-position 并不能提升 background-image 过渡性能——因为该属性根本不会被过渡。真正有效的加速点只在可合成的属性上。
立即学习“前端免费学习笔记（深入）”；
- 仅当使用
transform或opacity驱动渐变层切换时，will-change: transform才有意义 - 滥用
will-change反而增加内存占用，尤其在列表项中批量设置时，可能引发滚动掉帧 - 检测是否启用 GPU 合成：打开 Chrome DevTools → Rendering 面板 → 勾选「Paint flashing」，流畅过渡区域不应频繁高亮
transition: background-image，其实问题不在写法，而在这个属性压根不参与过渡计算。 
