最稳妥的背景动画方案是用 CSS @keyframes 配合 position: fixed 的独立 div 层，避免操作 body；需设 width/height 100%、z-index: -1，并用 background-size: 200% 200% 与 background-position 缓冲位移实现平滑渐变流动，时长≥8s、ease-in-out 更自然；Safari 兼容需用 CSS 变量+transition 或 opacity fallback，且 scroll 中须 requestAnimationFrame 节流。
直接用 CSS @keyframes + position: fixed 层最稳妥，不卡、不抖、不阻塞首屏渲染。JS 动画（比如 setInterval 改 backgroundColor）只适合单色切换，渐变或位移必须走 CSS。
为什么不能直接给 body 加背景动画？
滚动时会触发重绘抖动，body 高度随内容变化，height: 100vh 在移动端常失效，导致动画层被截断或错位。真实页面中，用户一滚动就看到背景“撕裂”，问题出在定位和尺寸锚定上。
- 必须额外加一个
<div id="bg-animation"></div>，而不是操作body或html -
#bg-animation要设position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1 - 别漏
z-index: -1—— 否则文字会被盖住，且无法点击表单控件
background-position 位移动画怎么写才平滑？
核心是让渐变图“动起来”但不跳变：靠 background-size: 200% 200% 拉伸画布，再用 background-position 在其中滑动起始点。直接写 0% 0% → 100% 100% 会生硬，得用中间态缓冲。
- 动画定义必须配对：
background-size: 200% 200%+background-position: 0% 50%→100% 50% - 起止值建议用
0% 50%和100% 50%（水平流动）或50% 0%和50% 100%（垂直流动），避免斜向导致视觉混乱 - 动画时长至少
8s，ease-in-out比linear更自然；太快易眩晕，太慢像卡死 - 别在动画里写
background-image: url(...)—— 图片加载延迟会导致动画开始前白屏
想用 JS 动态换渐变色，怎么避免 Safari 闪退？
Safari 对 background 属性的 CSS 变量过渡支持不稳定（15.4+ 才较可靠），直接改 style.background 会硬切。最兼容的做法是用 CSS 变量 + transition，并为旧版 Safari 准备 opacity fallback。
立即学习“前端免费学习笔记（深入）”；
- CSS 中声明：
body { --grad-start: #ff6b6b; --grad-end: #4ecdc4; background: linear-gradient(135deg, var(--grad-start), var(--grad-end)); transition: background 0.5s ease; } - JS 中只改变量：
document.body.style.setProperty('--grad-start', '#8e2de2'); - 如果要兼容 Safari 14 及更早版本，得准备两层
<div class="bg-layer">，用opacity切换，而不是动渐变本身 - 千万别在
scroll事件里频繁调用setProperty—— 加requestAnimationFrame节流，否则低端机直接掉帧
真正难的不是写动画，而是控制它“什么时候动、动多快、动完停在哪”。比如加载动画结束后要无缝衔接真实背景，就得用 animation-fill-mode: forwards 锁定终态；又比如粒子背景，60 个点是甜点，120 个在 iPhone SE 上就开始掉帧——这些细节没压住，再酷的动画也是负体验。
