CSS background-image 无法直接动画化渐变，可行方案只有background-position移动或双层渐变+opacity切换；后者需确保两层opacity交叠、加背景保底、用transformZ触发硬件加速并避免动态改background属性。
background-image 动画必须用 @keyframes + background-position 模拟？
不是。CSS 渐变本身不能直接动画化 background-image，因为 linear-gradient() 是非数值型值，浏览器不支持在关键帧中插值。强行写 background-image: linear-gradient(...) 在 @keyframes 里会静止在起始或结束状态，看起来没变化。
真正可行的路径只有两条：用 background-position 移动渐变色块（适合方向固定、颜色停靠点不变的场景），或者用两层渐变叠加 + opacity 交叠切换（更灵活，推荐）。
常见错误现象：animation 声明写了，开发者工具里看到属性在变，但页面背景完全不动——大概率是直接 animating background-image。
- 别写
background-image: linear-gradient(0deg, red, blue) → linear-gradient(90deg, green, yellow)，无效 - 想换方向/换色停靠点，优先走「双层遮罩」方案
- 如果只是让同一组颜色沿某方向“流动”，用
background-size配合background-position即可
双层渐变切换：如何避免闪屏和跳变？
核心是控制两层 background-image 的叠放顺序和透明度过渡节奏，同时确保容器始终有至少一层可见背景。
立即学习“前端免费学习笔记（深入）”；
关键参数差异在于：z-index 无法作用于 background，所以得用伪元素或额外 div 分层；opacity 动画要配合 transition 或 animation 精确对齐时序；两层渐变的 background-size 必须一致，否则缩放错位。
性能影响小，但兼容性要注意：IE 完全不支持 linear-gradient 动画，所有现代浏览器（Chrome 63+、Firefox 61+、Safari 12.1+）都支持双层方案。
- 用
::before和::after伪元素分别承载两个渐变，position: absolute覆盖父容器 - 初始状态：第一层
opacity: 1，第二层opacity: 0 - 动画中：第一层 opacity 从 1→0，第二层从 0→1，duration 相同、timing-function 一致（如
cubic-bezier(0.4, 0, 0.2, 1)） - 切记加
will-change: opacity防低端设备卡顿
animation-delay 怎么配才不露白底？
双层切换时，如果第二层渐变还没完全显出来，第一层就已消失到底，中间就会透出父元素背景（常是白色或透明），造成“闪白”。
根本原因是两层 opacity 动画没对齐，或容器本身没设 background-color 保底。这不是延迟问题，而是交叠窗口没留余量。
正确做法是让两层 opacity 变化区间有重叠，比如第一层从 0.2s 开始 fade out，第二层从 0s 就开始 fade in，持续 1.2s —— 这样在 0.2s–1.2s 区间内始终有 >0.01 的不透明度叠加。
- 不要用
animation-delay: 1s让第二层等第一层结束再入场 - 把两层 animation duration 设为相同值（如
1.2s），第一层animation-delay: 0s，第二层animation-delay: -0.2s - 给容器加一句
background-color: #1a1a1a，哪怕只作为 fallback 也比透底强
移动端 Safari 切换卡顿？检查 will-change 和 transform
Safari（尤其是 iOS 15–16）对 opacity 动画优化较弱，纯靠它做背景切换容易掉帧。加 will-change: opacity 有帮助，但更稳的方式是触发硬件加速。
最轻量的触发方式是给伪元素加一个无感的 transform: translateZ(0) 或 transform: scale(1)，强制走 GPU 合成层。注意别加在 body 上，只加在实际做动画的伪元素上。
另一个坑是：iOS Safari 不支持 @keyframes 中 background-image 的任何变化，所以双层方案里千万别试图在 keyframes 里改 background-image 值，只动 opacity 和 transform。
- 给
::before加transform: translateZ(0)，不加其他 transform 属性 - 避免在动画过程中动态修改
background-size或background-position，Safari 渲染不稳定 - 测试时用真机，模拟器的渲染行为和真实设备差异很大
渐变切换看着简单，但跨浏览器一致性差、移动端渲染路径敏感、动画时序容错低——最容易被忽略的是「两层 opacity 交叠区间必须大于 0」，少写 0.1s 的 overlap，就可能在旧 iPad 上闪一下白底。
