CSS transition 对 background-image（含 linear-gradient）完全无效，因 W3C 规范将其列为不可动画属性，无法线性插值；可用 background-position 移动“视窗”、伪元素 opacity 淡入淡出或 @property 驱动颜色插值实现替代效果。
CSS transition 对 background-image（含 linear-gradient()）完全不生效，不是写法问题，是 W3C 规范明确禁止插值——浏览器压根不计算中间帧，只做硬切换。
为什么 transition: background 或 transition: background-image 都没动画
你写了 transition: background 0.3s，hover 时背景却“啪”一下跳变，DevTools 显示新值已应用，但时间轴里空空如也。这不是兼容性 bug，而是规范定义：background-image 属于「不可动画属性」。它被解析为 <image> 类型，而该类型无法线性插值。
-
linear-gradient(to right, #ff0000, #00ff00)和linear-gradient(to right, #00ff00, #0000ff)结构再一致，浏览器也只会替换，不会生成过渡帧 -
transition: background-color对渐变无效——它只影响纯色层，不参与渐变渲染 - 控制台静默忽略，不报错、不警告，开发者工具里也看不出异常
- 用
background简写声明（如background: linear-gradient(...) #fff）同样失效，本质还是触发了background-image赋值
用 background-position + background-size 模拟流动效果
这是最轻量、兼容性最好、性能可控的方案：把渐变“画布”拉大，再移动“窗口”，视觉上就是颜色在流动。关键不是让渐变变，而是让“看到哪一段”变。
-
background-size必须 ≥ 200%，推荐400% 400%；太大（如 800%）会增加 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。适合需要明确起止状态的交互场景。
立即学习“前端免费学习笔记（深入）”；
- 主元素设
background: linear-gradient(...)作为底图 -
::before设content: ""、position: absolute、inset: 0、background: linear-gradient(...)、opacity: 0 - hover 时将
::before的opacity设为1，并加transition: opacity 0.4s ease - 注意父容器需有
position: relative，否则伪元素定位错乱
别踩 @property 的兼容性坑
@property 可驱动颜色插值实现真正渐变过渡，但截至 2026 年 10 月，它仍存在明显限制：
- 仅 Chrome 120+、Edge 120+、Firefox 125+ 支持；Safari 17.6+ 刚加入，iOS Safari 17.6 未同步支持
- 必须提前注册自定义属性，且类型限定为
<color>，不能直接注册整个linear-gradient() - 需要配合
background-image: linear-gradient(from var(--start), to var(--end))这类写法，实际可动画的仍是颜色值，不是渐变结构本身 - 在 SSR 或静态站点生成时，
@property不会被服务端解析，可能造成首屏闪动
真正容易被忽略的点是：哪怕你用了伪元素法，如果主元素有 background-clip: padding-box 或 border-radius，而伪元素没对齐尺寸或 z-index，就会出现边缘漏底、圆角裁切等视觉断裂。动画是否“自然”，往往卡在这些细节对齐上，而不是过渡逻辑本身。
