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
