CSS背景动画必须用@keyframes配合background-position、渐变色停靠点或opacity（伪元素中）实现，background-image本身不支持直接过渡；多图轮播需多层伪元素+opacity动画，单图仅能位移/缩放；CSS变量+渐变可平滑变色，但Safari 15.4+才完全支持；background-color过渡须显式声明transition，禁用transition: all；background-attachment: fixed性能差，移动端应禁用。

background-image 动画必须用 @keyframes 配合 background-position 或渐变色切换

纯 background-image 本身不支持直接 CSS 动画过渡（比如从一张图淡入另一张），浏览器会直接跳变。真正可动画的属性只有：background-position、background-size、opacity（需包裹在伪元素中）、以及基于 linear-gradient 的颜色停靠点（color-stop）。

常见做法是：用两层背景（或一个伪元素 + 真实元素），控制其中一层的 opacity 或 background-position 实现“过渡感”。如果坚持单元素单图，只能靠位移/缩放制造动效，而非图像切换。

• 想实现“多图轮播式”背景？必须用多个 ::before/::after 层叠 + opacity 动画
• 想让一张图缓慢平移？用 @keyframes 改变 background-position，记得设 background-repeat: no-repeat 避免重复干扰
• 用渐变做动态背景最灵活：把 linear-gradient 的起始/结束色写成变量，再用 @keyframes 修改 color-stop 位置或颜色值

用 CSS 变量 + @keyframes 实现渐变背景颜色平滑过渡

原生 CSS 不允许直接对 background-image: linear-gradient(...) 整体做动画，但可以把颜色值抽成 --start-color 和 --end-color，再在 @keyframes 中修改这些变量——前提是使用 background: linear-gradient(var(--start-color), var(--end-color)) 写法。

注意：Safari 15.4+ 才完全支持对 CSS 变量的动画（需配合 transition 或 @keyframes），旧版 Safari 会失效；Chrome/Firefox 支持良好。

:root {
  --start-color: #ff6b6b;
  --end-color: #4ecdc4;
}

.hero {
  background: linear-gradient(var(--start-color), var(--end-color));
  animation: bgShift 8s ease-in-out infinite;
}

@keyframes bgShift {
  0% {
    --start-color: #ff6b6b;
    --end-color: #4ecdc4;
  }
  50% {
    --start-color: #45b7d1;
    --end-color: #96ceb2;
  }
  100% {
    --start-color: #feca57;
    --end-color: #ff9ff3;
  }
}

background-color 过渡要避免「闪烁」就得加 transition

单纯写 background-color: red; → background-color: blue; 不会自动过渡，必须显式声明 transition: background-color 0.3s ease;。漏掉这句，就是硬切。

更隐蔽的问题是：如果用 JS 动态改 class 触发颜色变化，但 class 中没定义 transition，或者写了 transition: all 0.3s 却没限制属性范围，就可能因其他属性（如 padding、font-size）意外参与动画而卡顿。

• 推荐写法：transition: background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
• 不要用 transition: all，尤其在复杂组件里
• 若需 JS 控制，优先用 element.style.transition = 'background-color 0.3s'; 而非 class 切换，避免样式表覆盖风险

性能关键：background-attachment: fixed 会触发每帧重绘

带滚动视差的动态背景（比如 background-attachment: fixed + background-position 动画）在 Chrome 和 Firefox 中会强制启用合成层，但 Safari 下容易掉帧。更严重的是：它会让整个背景图参与每帧绘制，哪怕只是轻微位移。

优化方向很明确——不用 fixed，改用 transform: translateZ(0) 或 will-change: background-position 提前提示合成，但后者仅在必要时加，滥用反而降低性能。

• 测试发现：1920×1080 背景图 + fixed + 每秒 60 帧位移动画，在 M1 Mac 上 GPU 占用可达 40%+
• 替代方案：用 SVG 滤镜或 Canvas 绘制动态渐变，CPU/GPU 负担更低
• 移动端务必禁用 background-attachment: fixed，iOS Safari 不支持且会降级为 static