background-image 本身不支持 transition，直接设置无效；仅 background-position、background-size、opacity、filter 及现代浏览器中 linear-gradient 内颜色值可平滑过渡。
background-image 本身不能加 transition
直接写 transition: background-image 0.3s 完全无效——浏览器不把 background-image 当作可插值属性，既不会报错，也不会动。你看到的“切换”，其实是强制重绘导致的闪跳。
真正能触发平滑过渡的，只有那些有数值维度、支持插值的原生属性：background-position、background-size、opacity、filter，或者在现代浏览器中（Safari 16.4+ / Chrome 110+）被部分支持的 background-image 值变更（仅限 linear-gradient() 内部颜色变化）。
- 用
background-image: linear-gradient(...)时，变量必须是颜色类型（如#ff6b6b或hsl(120, 70%, 60%)），不能是关键词（red）或带transparent的混合值 - 必须单独设置
background-image，避免用background简写覆盖整个背景声明 - 旧版 Safari（background-image 的 transition，会立刻跳变
用 CSS 变量 + transition 实现渐变色平滑过渡
核心不是“动画渐变”，而是“变量变 → 渐变重算 → 浏览器对新渐变做离散过渡”。这要求变量参与计算的最终属性显式声明 transition，且变量值类型稳定。
正确写法示例：
:root {
--grad-start: #667eea;
--grad-end: #764ba2;
}
.hero {
background-image: linear-gradient(45deg, var(--grad-start), var(--grad-end));
transition: background-image 0.4s ease;
}
- JS 更新变量时用
element.style.setProperty('--grad-start', '#00c9ff')，不要用style.background = '...'覆盖 - 如果同时改多个变量（如起止色+角度），建议用
cssText批量赋值，避免多次 layout 触发 - 监听动画结束用
transitionend，但必须过滤event.propertyName === 'background-image'，否则可能误触其他属性
@property 是渐变角度动画的唯一可靠路径
想让 linear-gradient(var(--angle), ...) 真正丝滑转动？光靠普通 CSS 变量不行——浏览器不解析变量注入后的函数，--angle 只是字符串占位符。
必须用 CSS.registerProperty() 显式注册变量类型，告诉浏览器：“这是角度，可以插值”：
if (CSS && CSS.registerProperty) {
CSS.registerProperty({
name: '--angle',
syntax: '<angle>',
inherits: false,
initialValue: '45deg'
});
}</angle>
- 注册后，
transition: --angle 0.8s ease才真正生效（Chrome 110+ / Safari 16.4+ 支持） - 注意：注册需在 CSS 解析前执行（如放在
内联 script 中），否则变量仍按字符串处理 - 不支持注册的浏览器（如 Firefox 当前版本）会静默降级，需提供 fallback 方案（如用
background-position模拟旋转感）
多图背景切换必须用伪元素 + opacity
想轮播三张图片作为背景？别碰 background-image 动画。浏览器不支持多图之间淡入淡出，强行写只会闪。
标准解法是叠两层伪元素，控制 opacity 交错切换：
.hero {
position: relative;
}
.hero::before,
.hero::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-size: cover;
background-position: center;
}
.hero::before {
background-image: url('a.jpg');
opacity: 1;
transition: opacity 0.6s ease;
}
.hero::after {
background-image: url('b.jpg');
opacity: 0;
}
- 切换时 JS 同时改两个伪元素的
opacity（一个从 1→0，另一个从 0→1） - 第三张图加入时，需动态插入新伪元素或复用其中一层，避免 DOM 膨胀
- 移动端慎用
background-attachment: fixed，iOS Safari 会禁用该属性并降级为 scroll，应改用transform: translateZ(0)强制合成层
最易被忽略的一点：所有基于变量的背景动画，都依赖浏览器对 var() 的实时重计算能力。如果变量定义在局部作用域（比如某个 class 内），或未在 :root 中声明初始值，var(--x) 会退化为空或透明，整个动画就断了。动手前先检查 computed style 里的 background-image 是否真实存在且非 none。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
