CSS变量--grad-start和--grad-end可实现渐变色过渡动画，需配合background-image单独设置、transition: background-image及正确颜色值类型，Safari 16.4+等现代浏览器才稳定支持。
用 --grad-start 和 --grad-end 控制渐变色起点终点
渐变本身不支持直接动画，但 CSS 变量可以被 transition 捕获——前提是变量值被用在可过渡的属性里，比如 background-image 中的 linear-gradient()。关键不是“让渐变动起来”，而是“让变量变，再让渐变跟着重算”。
实操建议：
- 定义两个 CSS 变量：
--grad-start和--grad-end，类型必须是颜色（如#ff6b6b或hsl(120, 70%, 60%)），不能是关键词（如red）或透明度单独控制值，否则部分浏览器会跳过过渡 - 在
background-image中写死linear-gradient(45deg, var(--grad-start), var(--grad-end))，不要加!important或内联样式覆盖，否则变量失效 - 给元素加
transition: background-image 0.4s ease——注意：Safari 16.4+ 才真正支持background-image过渡，旧版 Safari 会立刻切换
为什么 background 简写会打断渐变过渡
很多人把 background: linear-gradient(...) 写成简写形式，结果变量一改，整个背景“闪一下”再切过去。这是因为 background 是复合属性，浏览器无法精确比对前后两个渐变函数的差异，干脆全量重绘。
实操建议：
- 只用
background-image单独设置渐变，其他背景相关属性（background-color、background-size）分开写 - 避免在 JS 中用
element.style.background = '...'赋值，这会覆盖全部背景，包括你设的变量和 transition - 检查 computed style：如果看到
background-image: none或空值，大概率是简写冲突或变量未生效
在 JS 中安全更新 CSS 变量触发渐变切换
直接改 style.setProperty('--grad-start', 'blue') 没问题，但顺序和时机不对，动画就掉帧或卡住。
实操建议：
- 批量更新多个变量时，用
element.style.cssText += '--grad-start: #00f; --grad-end: #0ff;'或循环后统一触发一次重排，避免多次 layout 强制同步 - 别在
requestAnimationFrame里反复 setProperty——CSS 变量本身不是性能瓶颈，但高频修改 + 过渡会触发大量样式计算 - 如果需要“切换后回调”，监听
transitionend事件，但只监听background-image（不是background），且加event.propertyName === 'background-image'过滤
IE 和旧版 Edge 完全不支持 CSS 变量过渡
IE 11 对 var(--x) 都不解析，更别说过渡。即使加了 @supports (background-image: linear-gradient())，也拦不住变量解析失败。
实操建议：
- 不降级：明确声明最低支持 Chrome 63+/Firefox 58+/Safari 12.1+，这些版本才稳定支持
background-image+ 变量 + transition 组合 - 若必须兼容，改用
background-position动画模拟“渐变流动”效果（如宽幅渐变图平移），或用 SVG<lineargradient></lineargradient>+ JS 更新 stop 颜色 - 测试时打开 DevTools 的 Rendering 面板，勾选 “Paint flashing”，看渐变切换是否引发大面积重绘——这是过渡卡顿的直接信号
立即学习“前端免费学习笔记（深入）”；
渐变动态切换真正难的不是写法，而是搞清哪一步在哪个浏览器里被静默忽略：变量值类型、属性写法粒度、transition 目标属性名、事件监听字段……漏一个，效果就断在半路。
