background-image 不支持 transition 动画，因渐变属 类型，CSS 规范禁止其插值；可行方案包括：用 rgba 颜色层叠加渐变并过渡颜色、用伪元素 opacity 切换不同渐变、或现代浏览器中借助 @property 动画渐变参数。
background-image 不能直接用 transition 动画
CSS 的 transition 对 background-image 属性无效——哪怕你写成 transition: background-image 0.3s ease，浏览器也完全不响应。这是因为渐变本质是图像（linear-gradient() 等生成的是 <image></image> 类型），而 CSS 规范明确不支持对图像类型做插值过渡。
用 background-color + transparent 渐变模拟“可过渡”的背景
真正能被 transition 平滑处理的，只有 background-color 这类颜色值属性。所以常见解法是：把渐变“拆”成两层——底层用纯色渐变（固定），上层用半透明白色/黑色遮罩，并通过改变遮罩的 background-color 来制造明暗/饱和度变化的错觉。
更直接的做法是：用两个 background 层，其中一层是带透明度的纯色（如 rgba(255,0,0,0.8)），另一层是渐变；然后只对纯色层做 transition。示例：
div {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4),
rgba(255, 255, 255, 0.2);
transition: background 0.4s ease;
}
div:hover {
background: linear-gradient(45deg, #4ecdc4, #ff6b6b),
rgba(0, 0, 0, 0.1);
}
注意：这里实际生效的是 rgba() 颜色通道的过渡，渐变方向和色标本身没变，但叠加后视觉效果会“流动”起来。
立即学习“前端免费学习笔记（深入）”；
用伪元素 + opacity 过渡实现真渐变切换
如果必须让两个不同渐变之间平滑切换（比如从蓝紫渐变切到橙黄渐变），唯一可靠方式是用 ::before 或 ::after 伪元素覆盖一层，控制其 opacity 动画：
- 主元素保持一个渐变背景
- 伪元素设置另一个渐变，并初始
opacity: 0 - hover 时设为
opacity: 1，配合transition: opacity 0.5s ease - 两者都设
background-clip: padding-box避免边框干扰
这样浏览器只需插值 opacity，完全规避了渐变不可过渡的限制，且兼容性好（IE11+ 支持）。
用 CSS 自定义属性 + @property 做渐变参数动画（现代方案）
Chrome 110+ 和 Safari 16.4+ 支持 @property 声明可动画的自定义属性，再配合 background-image: paint(...) 或 CSS Houdini，理论上能真正驱动渐变色标变化。但目前实用门槛高：
-
@property必须显式声明syntax: '<color>'</color>才能被transition识别 - 需用
background-image: linear-gradient(... var(--start), ... var(--end))，但浏览器对变量在linear-gradient()中的解析仍不稳定 - 多数项目没必要为这个特性增加 polyfill 或降级逻辑
现阶段，除非明确锁定最新 Chrome 用户，否则优先选伪元素方案——它不依赖新 API，行为确定，调试直观。
真正容易被忽略的是：渐变过渡的“平滑感”往往不来自渐变本身，而来自过渡时长、缓动函数与视觉节奏的匹配。0.3s 的 ease-in-out 在按钮上很自然，在全屏背景上可能显得突兀；多试几次，比纠结能不能直接 transition linear-gradient 更有效。
