background-image不能直接transition，因w3c规范将其列为不可动画属性，浏览器静默忽略；可靠方案是用伪元素+opacity切换，或借助background-position、@property等间接方式实现视觉过渡。
background-image 不能直接 transition，写了也白写
直接写 transition: background-image 0.4s 不会触发任何插值动画。W3C 规范明确将 background-image 列为不可动画属性，Chrome 静默忽略，Firefox 和 Safari 表现不一致——你看到的“动了”，大概率是重绘抖动或图层闪动，不是真实过渡。
这不是浏览器 bug，是设计如此：图像资源加载、解码、绘制过程无法在两张图之间线性插值。想靠改 background-image 值实现淡入淡出，逻辑上就走不通。
- 常见错误现象：hover 或 class 切换时背景图瞬间切换、闪白、卡顿
- 别用
will-change: background-image，它不改变可动画性 - 别依赖
image-set()做响应式切换——它只认 dpr，不响应视口宽度
用伪元素 + opacity 是最稳的方案（IE11+ 兼容）
核心思路是把“换图”转译成“显隐控制”：主元素和伪元素各持一张图，只对 opacity 做过渡。浏览器原生支持好，行为可预测，且无需 JS。
关键实操点：
- 容器必须设固定尺寸（如
height: 400px），不能用height: auto，否则opacity变化可能触发 layout 抖动 - 两个伪元素都加
content: ""和position: absolute，否则不渲染 - 务必预加载备图：
::after { content: url("bg2.jpg"); visibility: hidden; } - 两层都设
background-clip: padding-box，避免边框干扰叠加区域 - 切换时同步改两层
opacity：旧图 → 0，新图 → 1；不要等图片加载完再动样式
JS 控制轮播时，定时器节奏必须严丝合缝
用 setInterval 切换 class 实现循环轮播，卡顿往往不是代码写错，而是时间没对齐。
比如 CSS 写了 transition: opacity 1.2s ease，JS 的间隔就必须 ≥ 1300ms（即 1.2s + 至少 0.1s 余量）：
- 设成 1200ms：动画还没结束就切下一张，浏览器来不及完成渲染，结果跳变或回退
- 用
setTimeout递归调用时，必须先clearTimeout上一个句柄，否则定时器堆积导致节奏错乱 -
requestAnimationFrame不适合这种固定节拍场景——它依赖帧率波动，反而更难对齐 transition 周期 - 图片未预加载就切换 class，会闪白屏；建议用
new Image().src = url提前触发加载
想滑动？别碰 background-position，用 transform 模拟
background-position 在多数浏览器中仍不被可靠支持 transition，Safari 基本无效，Chrome/Firefox 行为也不稳定。所谓“平滑位移”常是父容器 transform 带动的错觉。
真正可控的做法：
- 把背景图当独立子元素处理：
position: absolute覆盖父容器 - 子图宽高设为
200%，用transform: translate(-25%, -25%)对齐初始位置 - 过渡只改
transform，例如transform: translateX(-100px)，避免用百分比（它和background-position的百分比逻辑冲突） - 父容器加
overflow: hidden，确保滑出部分被裁剪
真正难的不是写几行 CSS，而是判断该用哪条路径：要不要兼容 IE/旧版 Safari？有没有 JS 动态控制需求？渐变里要不要动 stop 位置？这些决策点比语法本身更容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
