CSS 的 transition 无法直接平滑过渡 background-image 的渐变值，需改用 CSS 变量（如 --start、--end）配合 background 简写实现；Chrome 111+ 和 Safari 16.4+ 支持变量插值，Firefox 暂不支持；多色渐变可用多层单色渐变 + background-position 模拟。
transition 不能直接过渡 background-image 的渐变值
CSS 的 transition 对 background-image 是“不敏感”的——哪怕你写了 transition: background-image 0.3s，浏览器也不会平滑插值两个 linear-gradient() 之间的颜色停靠点。这是最常卡住人的地方：看着代码没问题，但切换就是突变。
真正能被过渡的，是 CSS 自定义属性（--color-stop-1 这类变量），前提是它们被用在支持动画的函数里，比如 color、background-color，或者通过 mask/clip-path + 单色渐变间接驱动。
- 别写
transition: background-image 0.3s，它无效 - 渐变本身不是“可插值属性”，但颜色值是；把停靠点拆成变量，再用
background: linear-gradient(var(--c1), var(--c2))是可行路径 - 注意：Chrome 111+ 和 Safari 16.4+ 才开始支持对
linear-gradient()中变量的动态插值；Firefox 目前仍不支持（截至 2024 年中）
用 CSS 变量 + background 实现可过渡的渐变停靠点
核心思路是把颜色值抽成 --start、--end 等变量，再让 background 引用它们。只要变量值变化，且该变量出现在支持 transition 的上下文中（如 background 简写），浏览器就能插值。
但注意：background 简写会重置所有子属性，所以必须确保整个渐变声明都基于变量，不能混用固定值。
立即学习“前端免费学习笔记（深入）”；
button {
--start: #ff6b6b;
--end: #4ecdc4;
background: linear-gradient(to right, var(--start), var(--end));
transition: background 0.4s ease;
}
button:hover {
--start: #45b7d1;
--end: #96ceb2;
}
- 必须用
background（而非background-image）引用变量，否则 transition 不触发 - 变量名要一致，且不能带单位或函数（如
--stop1: 30%无法参与颜色插值） - IE 完全不支持 CSS 变量，如需兼容，得 fallback 到 JS 控制 class 切换
多停靠点渐变怎么过渡？拆成多个变量 + background-position 模拟
三色以上渐变（如 linear-gradient(to right, red, yellow, blue)）没法直接用两个变量覆盖。硬塞多个变量进 linear-gradient() 会导致语法错误，因为 CSS 不允许在函数内对多个参数分别绑定变量。
更稳的解法是：用单色层叠 + background-position 移动来模拟停靠点偏移，只让位置动，颜色保持静态。
.gradient-track {
background:
linear-gradient(to right, #ff6b6b, #ff6b6b) 0% / 33.3% 100%,
linear-gradient(to right, #4ecdc4, #4ecdc4) 33.3% / 33.3% 100%,
linear-gradient(to right, #45b7d1, #45b7d1) 66.6% / 33.3% 100%;
background-repeat: no-repeat;
transition: background-position 0.4s ease;
}
.gradient-track:hover {
background-position:
10% 0%,
43.3% 0%,
76.6% 0%;
}
- 每个渐变层宽度固定（如
33.3%），靠background-position水平移动来“露出”不同颜色区域 - 这样只动 position，完全避开颜色插值限制，兼容性更好（支持到 Edge 16+）
- 停靠点越多，层叠越重，渲染开销略升；移动端慎用超过 5 层
JS 主动更新变量时，记得触发重排或用 requestAnimationFrame
如果用 JS 动态改 style.setProperty('--start', ...)，尤其在循环中频繁修改，容易因浏览器跳过重绘导致过渡失效或卡顿。
这不是 CSS 问题，而是执行时机问题：变量变了，但浏览器还没来得及把新值注入渲染流水线。
- 避免在 for 循环里连续设变量；改用
requestAnimationFrame节流 - 极少数情况需强制重排，可在设变量后读一次
offsetHeight（不推荐，仅调试用） - 更干净的做法：用
Element.animate()配合timeline: new ScrollTimeline()做滚动驱动渐变，但目前只有 Chrome 支持
渐变停靠点的平滑切换，本质是绕开浏览器对 background-image 的硬限制，用变量 + 可过渡属性做桥梁。细节上，变量命名一致性、浏览器支持断层、多层叠加的性能代价，比看起来更值得花两秒确认。
