最稳方案是用CSS animation或transition改background-color，因浏览器原生支持颜色插值、无需JS、兼容IE10；禁用JS直接改backgroundImage以防重排重绘卡顿；须配animation-fill-mode:forwards或transition兜底防闪回；推荐HSL模式（h无单位，s/l带%）控色相渐变，避免RGB脏色。
CSS animation 改 background-color 是最稳、最省事的方案，只要不是想做渐变流动效果，纯色切换直接用 background-color 动画就行，浏览器原生支持插值、无需 JS、不卡顿、兼容性好到 IE10 都能跑。
为什么别用 JS 直接改 style.backgroundImage 做渐变动画
这不是“能不能写出来”的问题，是渲染机制硬限制：每次调 element.style.backgroundImage = 'linear-gradient(...)'，浏览器都得重排重绘，且无法走 GPU 合成层。实测中低端安卓机上 60ms 一帧的 requestAnimationFrame 循环，帧率立刻跌破 20fps；iOS Safari 还可能触发 WebKit 渲染管线异常，白屏或滚动卡死。真要 JS 控制，只该更新 CSS 变量（如 --bg-hue），让 CSS 引擎自己算插值。
background-color 动画必须配 transition 或 animation-fill-mode
否则会闪回初始色——尤其在无限循环（infinite）+ 方向反转（alternate）组合下，末帧结束瞬间若没锁住终态，下一循环开始前会跳回 0% 的颜色。
- 用
animation-fill-mode: forwards锁定最后一帧样式（推荐） - 或在元素默认样式里加
transition: background-color 0.3s ease，靠过渡兜底 - 别依赖浏览器默认值：部分旧版 Safari 对
fill-mode缺省行为不一致
HSL 模式写色值才能避免脏色和跳变
RGB 插值容易出灰、棕、暗沉等不可控中间色，比如 #ff0000 → #00ff00 中间会经过大量黄褐相间的脏色。HSL 就干净得多：
立即学习“前端免费学习笔记（深入）”；
- 固定
s和l值（如hsl(0, 70%, 85%)），只动h（色相） -
h必须带单位（%不行，必须是无单位数字，如0、120） - 起止色相差不宜过大（建议 ≤180°），否则动画过程仍可能视觉跳跃
- 示例：
@keyframes hueShift { 0% { background-color: hsl(0, 70%, 85%); } 100% { background-color: hsl(180, 70%, 85%); } }
最容易被忽略的是：HSL 的 s 和 l 值后面必须跟 % 单位（如 70%），漏掉就失效；而 h 是角度值，不能带 %。这个细节在 Safari 和 Firefox 中表现不一致，但 Chrome 会静默失败——页面看起来“没动”，其实只是 CSS 规则被丢弃了。
