CSS transition对background-image（含linear-gradient）完全无效，因W3C规范将其列为不可动画属性；可用伪元素opacity切换、background-position位移或@property自定义属性驱动颜色插值实现替代效果。
background-image 不能直接 transition，得换思路
CSS 的 background-image 属于“非可动画属性”，哪怕你写了 transition: background-image 0.4s，浏览器也只会硬切，不会插值两个 linear-gradient() 之间的颜色停靠点。这不是 bug，是规范限制。真正能被平滑过渡的，只有 background-color、opacity、transform 这类标量属性。
用伪元素 + opacity 模拟渐变切换（兼容性最好）
这是目前最稳妥、IE11+ 都支持的方案，核心是把渐变变化“转译”成透明度变化：
- 主元素设初始渐变背景，并保持
opacity: 1 -
::before伪元素覆盖同尺寸区域，设目标渐变，初始opacity: 0 - 给伪元素加
transition: opacity 0.5s ease - 状态切换时（如
:hover），把伪元素opacity改为1 - 两者都加上
background-clip: padding-box，避免边框干扰叠加
用 CSS 变量驱动渐变颜色（Chrome 111+/Safari 16.4+ 支持）
如果你只面向现代浏览器，可以把颜色停靠点抽成变量，让 background 简写引用它们：
- 定义变量：
--start: #ff6b6b; --end: #4ecdc4; - 主样式写：
background: linear-gradient(45deg, var(--start), var(--end)); - 在
:hover或 class 切换中改变量值，同时确保transition写在基础 class 上 - 注意：Firefox 目前仍不支持该插值（截至 2024 年中），且必须所有 stop 位置固定（如
0%、100%），不能混用固定值和变量
定时器切换渐变时容易卡顿？检查间隔是否够长
如果用 JS 定时切换 class 来循环渐变，常见卡顿或跳变不是代码写错，而是节奏失控：
立即学习“前端免费学习笔记（深入）”；
- 假设 CSS 中写了
transition: background-image 1.2s ease，JS 的setInterval至少设为1300（即 1.2s + 0.1s 余量） - 用
setTimeout递归调用时，务必先clearTimeout上一个句柄，否则定时器堆积会导致节奏错乱 -
requestAnimationFrame不适合这种固定节拍场景——它依赖帧率波动，反而更难对齐 transition 周期
真正难的不是写几行 CSS，而是判断该用哪条路径：要不要兼容旧浏览器？有没有 JS 控制需求？渐变里要不要动 stop 位置？这些决策点比语法本身更容易被忽略。
