不支持。background-image（含linear-gradient()）是w3c明确定义的不可动画属性，无法插值，浏览器仅硬切；可用background-position位移、伪元素opacity切换或@property变量插值模拟过渡。
直接给 background-color 或 color 加 transition 是最简单有效的办法，但很多“颜色变不动”的问题，其实不是 transition 写错了，而是你试图过渡的属性根本不可动画化——比如 background-image: linear-gradient()。
为什么 background: linear-gradient() 加 transition 没反应
浏览器不支持对 background-image 做插值过渡。写 transition: background 0.3s 看似合理，实际会被静默忽略；尤其三色以上渐变时，多数浏览器直接跳变，毫无过渡感。
- 真正可过渡的只有
background-position和background-size，它们控制的是“窗口怎么看这张渐变图” - 想让渐变“流动”，必须配合
background-size: 200% 200%（或更大），否则background-position移动没空间 - 别用
background-position: right这类语义值——不同浏览器解析不一致，应写明确百分比，如0% 50%→100% 50%
怎么让纯色背景平滑过渡
纯色之间切换，background-color 本身完全支持 transition，无需绕路。
- 确保写法是
transition: background-color 0.4s ease，而不是笼统的transition: background（后者可能被部分浏览器降级为无过渡） - 颜色值推荐统一用十六进制（
#ff6b6b）或 RGB（rgb(255, 107, 107)），避免 HSL 在低版本 Safari 中解析失败 - 如果目标元素有
background-image同时存在，background-color会被覆盖，过渡也看不见——先检查 computed styles 确认生效的是哪个背景层
怎么让文字颜色过渡到渐变效果
不能直接对 -webkit-text-fill-color 或 background-clip: text 做过渡，但可以用 color 控制显隐来“骗过”浏览器。
- 初始状态设
color: white（或其他实色），覆盖底层渐变 - 触发后设
color: transparent，让background-clip: text生效，渐变透过文字显现 - 只加
transition: color 0.5s ease就够了——color是原生可过渡属性，兼容性极好 - 必须配
background-clip: text+-webkit-background-clip: text+background-image: linear-gradient(...)三者缺一不可
最容易被忽略的一点：所有渐变动画都依赖尺寸控制。哪怕你把 transition、keyframes、方向全写对了，只要 background-size 不够大，或者容器高度塌陷（比如空 <div> 没设 <code>min-height），动画就卡在第一帧，看起来像没动。
