浏览器不支持 background-image 插值动画，因 CSS 规范禁止 linear-gradient 间插值；必须用 @property 注册 color/number/angle 类型变量，并在 transition 或 keyframes 中驱动变量变化，再注入渐变函数。
为什么直接动画 background-image 会失效
浏览器根本不支持对 background-image 做插值动画，哪怕你写了 transition: background-image 0.3s，也几乎没反应。这不是兼容性问题，是 CSS 规范限制：两个不同的 linear-gradient() 之间没有可计算的中间状态，引擎无法“混合”或“过渡”它们。
常见误判是看到 DevTools 里手动改变量值背景“动了”，其实只是重绘假象；或者以为加了 @property --color-a 就能直接驱动 background: linear-gradient(var(--color-a), #000) —— 这种写法在任何浏览器里都不生效，背景会变透明或退化为默认色。
-
linear-gradient()中的var(--x)只是字符串占位符，解析阶段就已判定函数无效 - 所有渐变颜色动画必须把“可变部分”抽成独立、可插值的 CSS 变量，并用
@property显式注册类型 - 只声明
--color-start: red不够，必须配@property --color-start { syntax: "<color>"; inherits: false; initial-value: red; }</color>
怎么写有效的 @property + 渐变动画
关键不是“让渐变动起来”，而是“让变量动起来，再把变量喂进渐变里”。@property 的作用就是告诉浏览器：“这个变量不是普通字符串，它是 <color></color> 类型，可以插值、可以 transition、可以 keyframes 驱动”。
以下是最简可行写法：
立即学习“前端免费学习笔记（深入）”；
@property --grad-start { syntax: "<color>"; inherits: false; initial-value: #ff6b6b; }
@property --grad-end { syntax: "<color>"; inherits: false; initial-value: #4ecdc4; }
.gradient-box {
background: linear-gradient(45deg, var(--grad-start), var(--grad-end));
transition: --grad-start 0.5s, --grad-end 0.5s;
}
.gradient-box:hover {
--grad-start: #0000ff;
--grad-end: #ffff00;
}
- 必须用
<color>（注意是尖括号包裹，不是引号）作为syntax值，否则变量不参与插值 -
inherits: false更安全，避免意外继承污染 -
transition要写在使用变量的元素上，且目标是变量名本身（如--grad-start），不是background - Chrome 100+、Firefox 111+、Safari 15.4+ 才支持；旧版本直接降级为静态色，无报错
用 hsl() 实现丝滑色相流动时的坑
想让渐变“流动”而不是“切换”，就得控制色相（--hue）连续变化。但直接写 0deg → 360deg 会卡住，因为浏览器认为 0 和 360 相同，关键帧一模一样，动画被跳过。
正确做法是跨边界递增，比如转两圈：
@property --hue-start { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --hue-end { syntax: "<number>"; inherits: false; initial-value: 120; }
@keyframes flow {
0% { --hue-start: 0; --hue-end: 120; }
100% { --hue-start: 720; --hue-end: 840; }
}
.flow-bg {
background: linear-gradient(to right,
hsl(var(--hue-start), 100%, 60%),
hsl(var(--hue-end), 100%, 60%)
);
animation: flow 8s infinite linear;
}
-
syntax: "<number>"必须小写，且不能漏掉引号和尖括号 - 两个变量都要声明
@property，缺一个整条渐变就卡死 - 别用
transition控制流动节奏——它只响应属性变更，而色相流动必须靠@keyframes主动驱动 - Safari 对
hsl()插值更敏感，建议加will-change: background;防掉帧
angle 参数不能用变量绑定
别试 linear-gradient(var(--angle), red, blue)，它永远不工作。浏览器在解析函数时，var(--angle) 还没展开，整个 linear-gradient() 就被判为语法无效，背景变透明。
真正能变量驱动旋转感的只有 conic-gradient：
@property --rotate { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.spinner {
border: 4px solid;
border-image: conic-gradient(from var(--rotate), #ff6b6b, #4ecdc4);
animation: spin 3s infinite linear;
}
@keyframes spin {
to { --rotate: 360deg; }
}
-
conic-gradient的from支持变量，且现代浏览器已稳定支持 -
@property --rotate的syntax必须是"<angle>"（带引号和尖括号） -
linear-gradient的角度只能写死值（如135deg或to bottom），这是规范硬限制，不是兼容性问题
真正容易被忽略的是：变量必须出现在可动画上下文里——@property 声明后，变量本身不会自动动，得靠 transition 或 @keyframes 显式触发；而且所有变量作用域必须能被目标元素读取，伪元素里定义的变量常因作用域隔离而失效。
