css transition 对 background-image（含 linear-gradient）完全无效，因 w3c 规范将其列为不可动画属性；可用 background-position 位移模拟流动、伪元素 opacity 淡入淡出或 @property 驱动颜色插值实现替代效果。
background-image 不能直接 transition，写 transition: background-image 或 transition: background 都会静默失效——这不是 bug，是 W3C 规范明确限制的。
为什么 background-image 无法过渡
linear-gradient() 属于 background-image 值，而该属性被规范定义为“不可动画”（non-animatable）。浏览器不会对两个渐变函数之间的颜色停靠点、角度或位置做插值计算。哪怕你写了 transition: background-image 0.4s，实际效果仍是硬切，毫无过渡感。
真正可平滑过渡的只有标量属性：background-color、opacity、transform、background-position 等。
用 background-position 模拟渐变流动（兼容性最好）
这是目前最可靠、全平台支持（包括 iOS Safari 13.4+）的方案：把渐变当一张大图，通过移动“视窗”制造颜色流动错觉。
-
background-size必须设为 ≥200% × 200%，推荐400% 400%；太小会导致位移范围不足，动画抽搐 -
background-position起点和终点单位必须一致，比如都用0% 50%→100% 50%；混用%和px会失效 - 方向要匹配：水平动就只改第一个值，垂直动只改第二个；双轴同步位移需同时覆盖周期
- 避免用
background简写重置样式——它会清掉background-position和background-size - 移动端卡顿？加
will-change: background-position或transform: translateZ(0)触发合成层（慎用，仅限必要元素）
用伪元素 + opacity 切换两个完整渐变
当你需要在方向/配色差异大的渐变之间切换（比如 to right #3498db→to bottom #e74c3c），background-position 就无能为力了——结构不一致会导致拉伸错位。这时该上伪元素分层控制。
- 主元素设
position: relative，::before和::after绝对定位盖满区域 - 两层分别写不同
background-image: linear-gradient(...)，初始一显一隐（opacity: 1/0） - 给伪元素加
transition: opacity 0.4s ease，状态切换时交叉淡入淡出 - 务必加
background-clip: padding-box，避免边框干扰叠加 - IE11+ 全支持，比 CSS 变量方案更稳妥
@property 驱动颜色插值（现代浏览器专属）
Chrome 111+ / Safari 16.4+ 支持用 @property 声明可动画的 CSS 变量，再注入渐变中。Firefox 目前仍不支持（截至 2026 年中）。
- 必须声明
@property --grad-start { syntax: '<color>'; inherits: false; initial-value: #ff6b6b; }</color> - 渐变写法必须显式：
background: linear-gradient(45deg, var(--grad-start), var(--grad-end))，不能靠简写 - 所有 stop 位置必须固定（如
0%、100%），不能混用变量和数值 - 变量只能存原子值（
#ff6b6b可以，linear-gradient()不行）
真正难的不是写哪几行 CSS，而是判断该用哪条路径：要不要兼容 IE 或旧版 Safari？有没有 JS 动态控制需求？渐变里是否要动 stop 位置或角度？这些决策点比语法本身更容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
