CSS 无法直接动画 background-image，需用 background-position、background-size、opacity 或伪元素叠加实现平滑切换；移动端 background-attachment: fixed 被限制，应改用 transform 或 JS 模拟。
background-image 用 CSS 动画切换会卡顿？
直接对 background-image 做 transition 或 @keyframes 动画，浏览器不支持——它不是可动画属性，强行写只会静默失效，连报错都没有。
常见错误现象：transition: background-image 0.5s; 完全没反应；或者用 animation 反复改 background-image，结果只有最后一帧生效，中间全是闪跳。
- 真正能动画的背景属性只有：
background-position、background-size、opacity（配合多层伪元素）、filter - 想“换图”，得用多层
::before/::after+opacity交错淡入淡出 - 如果图源来自变量（比如 CSS 自定义属性），注意
background-image: url(var(--bg-url))不触发重绘，必须配合opacity或transform触发合成层
用 @keyframes 实现平滑渐变背景（如径向渐变色流动）
纯色渐变背景可以动画，但必须用 background-position 配合重复渐变图案，或靠 background-size 放大缩小制造流动感。
典型场景：深蓝→紫→粉的循环过渡背景，不能靠改 background 值，而要构造一个足够大的渐变画布，再移动它的位置。
立即学习“前端免费学习笔记（深入）”；
- 写法示例：
@keyframes bg-move { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .element { background: linear-gradient(90deg, #0a0e2c, #3a1a5c, #d92f68, #0a0e2c); background-size: 300% 300%; animation: bg-move 12s ease-in-out infinite; } - 关键点：
background-size必须大于 100%，否则位移无效；ease-in-out比linear更自然，避免机械感 - 兼容性：IE 不支持
background-size动画，如需支持，得降级为 JS 控制 class 切换
用伪元素叠加实现多图轮播（无 JS）
想轮播三张图片但不用 JS？可行，但必须用两个伪元素 + opacity 控制显隐，靠 animation-delay 错开时机。
容易踩的坑是 z-index 和 opacity 同时动画导致渲染抖动，或忘记设置 pointer-events: none，让伪元素挡住点击。
- 结构要点：本体设
position: relative，::before和::after绝对定位满铺，content: ""，background-image各自指定 - 动画逻辑：用 3 个状态（0–33% 显示第一张，33–66% 第二张，66–100% 第三张），每张对应一个
opacity的 rise/fall 曲线 - 性能提示：给伪元素加
will-change: opacity，Chrome 下更稳；Safari 15.4+ 才完全支持伪元素animation，旧版需 fallback
background-attachment: fixed 在移动端失效？
加了 background-attachment: fixed 想做视差滚动，但在 iOS Safari 和安卓 Chrome 里经常不动——这不是 bug，是主动限制：为防滚动卡顿，移动端默认禁用 fixed 背景的合成。
真实使用场景：长页面中某个 section 需要背景随滚动缓慢位移，又不想用 JS 监听 scroll（性能差）。
- 替代方案一：用
transform: translateY()+will-change: transform模拟，由 JS 读取scrollY计算偏移量（轻量且可控） - 替代方案二：CSS-only 的 hack——用
clip-path配合background-position微调，但只适用于简单位移 - 关键提醒：哪怕在桌面端开启
fixed，也建议加backface-visibility: hidden防止偶发闪烁
animation 不够，得确认浏览器是否真把它提升为独立图层——看 opacity、transform、filter 这三个属性有没有至少一个参与动画，否则还是走主线程重绘。 
