background-image 无法被 transition 平滑插值，因 CSS 规范将其定义为不可动画属性；可用伪元素+opacity 实现无限循环，或 background-position 模拟流动渐变。
直接用 transition: background-image 实现无限平滑过渡不可行——浏览器不支持两个 linear-gradient() 之间的插值动画，无论你写多少次 hover 或加多长的 transition，都会硬切或静止。
为什么 background-image 无法被 transition 平滑插值
CSS 规范明确定义 background-image 为「不可动画属性」（non-animatable）。这意味着：
-
linear-gradient(45deg, #f00, #0ff)→linear-gradient(45deg, #0f0, #00f)不会生成中间帧，只会在触发瞬间跳变 - 即使所有 color stop 位置固定（如
0%、100%），Firefox 仍不支持该插值（截至 2026 年中） -
transition: background或transition: all会隐式包含background-image，但实际生效的只有background-color、opacity等标量属性
用伪元素 + opacity 实现真正无限循环
这是目前唯一兼容 IE11+、无 JS 依赖、可稳定无限运行的方案。核心是把“渐变切换”转译为“图层淡入淡出”：
- 主元素设
position: relative，背景留空或设基础色 -
::before覆盖初始渐变，opacity: 1 -
::after覆盖目标渐变，opacity: 0，并加transition: opacity 0.6s ease - 用
@keyframes控制两者 opacity 周期性翻转：0% →before:1 / after:0；50% →before:0 / after:1；100% → 回到起点 - 确保两伪元素都加
content: ""、position: absolute、inset: 0、background-clip: padding-box
```css
.gradient-loop {
position: relative;
height: 200px;
}
.gradient-loop::before,
.gradient-loop::after {
content: "";
position: absolute;
inset: 0;
background-clip: padding-box;
}
.gradient-loop::before {
background-image: linear-gradient(135deg, #ff6b6b, #4ecdc4);
opacity: 1;
transition: opacity 0.6s ease;
}
.gradient-loop::after {
background-image: linear-gradient(135deg, #ffd166, #06d6a0);
opacity: 0;
transition: opacity 0.6s ease;
}
@keyframes loop-fade {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.gradient-loop::before { animation: loop-fade 4s infinite; }
.gradient-loop::after { animation: loop-fade 4s 2s infinite; }
```用 CSS 变量 + background-position 模拟“流动渐变”
如果你不需要精确切换两种不同渐变，而是想要一种持续滚动、色彩流动的视觉效果，这个方案更轻量、性能更好：
立即学习“前端免费学习笔记（深入）”；
- 定义一个超宽渐变（如
background-size: 300% 100%），含 3–5 个颜色停靠点 - 只对
background-position做transition或@keyframes动画 - 动画周期必须 ≥ 渐变宽度 / 速度，否则会卡顿或回跳
- 注意：不能用于需要明确起止色的场景（比如从红→蓝→绿按顺序轮播）
```css
.flow-gradient {
height: 200px;
background: linear-gradient(
90deg,
#ff6b6b 0%,
#4ecdc4 25%,
#ffd166 50%,
#06d6a0 75%,
#118ab2 100%
);
background-size: 300% 100%;
animation: flow 6s ease-in-out infinite;
}
@keyframes flow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
```JS 驱动时最容易踩的定时器坑
若需用 JS 切换多个渐变（比如 5 种配色循环），别用 setInterval 直接改 class：
- 如果 CSS 中
transition: background-image 1.2s，JS 的setInterval必须 ≥1300，否则新状态在旧动画结束前就触发，导致跳帧 - 用
setTimeout递归时，务必先clearTimeout上一个句柄，否则定时器堆积，节奏越来越快 -
requestAnimationFrame不适合固定节拍——它受屏幕刷新率影响，无法对齐 transition 周期 - 推荐做法：监听
transitionend事件，在动画真正结束后再触发下一次切换
真正难的不是写哪段代码，而是判断你要的是“精确色值切换”还是“视觉流动感”，以及是否必须支持 Safari 15 或 Firefox。选错路径，后面所有优化都是白搭。
