background-position动画必须用像素或百分比，禁用em/rem；需确保单位一致、容器尺寸明确、overflow:hidden裁剪、首尾帧视觉无缝衔接，且animation-iteration-count:infinite不可省略。
background-position 动画必须用像素或百分比，禁用 em/rem
浏览器无法对单位不一致的 background-position 值做线性插值。比如从 0 0 → 1em 1em，动画会卡顿甚至直接不触发；而 0 0 → 100% 100% 或 0 0 → -200px -200px 才能平滑过渡。
常见错误现象：background-position: 0 0; → background-position: 100vw 100vh; 看似动了，实际是整张图被拉伸重绘，不是滚动效果。
- 贴图尺寸为 200px × 200px 时，终点建议设为
-200px -200px（非200px 200px），否则方向反了 - 百分比方案更适合响应式，但需确保容器有明确宽高（如
height: 400px或aspect-ratio: 16/9），否则基准漂移 - 若容器是 flex/grid 子项，检查是否被
align-items: stretch拉高导致意外留白
overflow: hidden 是无限滚动的真正关键，不是 position: relative
很多人以为必须套一层 position: relative 才能做背景滚动，其实不是。overflow: hidden 才是让“滚动”看起来局部发生的决定性条件——它把超出区域的背景切掉。没有它，你会看到背景一路往右下跑出屏幕。
position: relative 只在你需要绝对定位子元素（比如叠加文字层）时才需要，和背景动画本身无关。
立即学习“前端免费学习笔记（深入）”；
- 容器高度必须明确，否则
background-position: 100%计算无锚点 - 如果用
background-size: cover，会导致缩放比例不可控，background-position百分比映射失准，循环时出现明显回跳或撕裂 - 多层云/粒子动画中，
overflow: hidden同样适用，且必须每层独立设置
@keyframes 首尾帧必须视觉一致，且 animation-iteration-count: infinite 不可省略
animation-iteration-count: infinite 是唯一可靠方案，不能写成字符串 "infinite"，也不能用大数字（如 999）替代——本质仍是有限次，长周期动画可能提前终止。
首尾帧状态不一致是“闪跳”的最常见原因：比如 0% { background-position: 0 0; }，但 100% { background-position: 100% 0; }，图像水平方向没形成自然拼接，循环瞬间就会跳帧。
- 横向无缝滚动推荐写法：
0% { background-position: 0 0; }→100% { background-position: -200px 0; }（贴图宽 200px） - 垂直滚动若容器高 500px，终点 Y 值应为
500px，而非100vh（视口单位与容器尺寸不匹配） - 动画时长建议 ≥ 0.5s，太短肉眼难识别循环；timing-function 推荐
linear，避免steps(1)类离散函数导致悬停
真正平滑的横向循环要靠 background-size + background-position 协同控制
仅靠增大位移值或延长动画时间，解决不了“重置闪烁”。核心是让背景在水平方向具备天然重复性，使动画终点恰好衔接起点。
错误做法：background-size: cover + background-position: 0 0 → 100% 0 —— 缩放比例随容器宽高比浮动，导致位移量不可预测。
- 正确解法：设
background-size: 300% auto（确保水平冗余），再让background-position从0%动到100%，此时位移距离 = 图像自身宽度 / 2，首尾自然衔接 - 渐变背景同理：终点
background-position的 Y 值必须等于容器高度（如500px），不能依赖视口单位 - 多层背景错开
animation-duration和z-index即可实现视差，但每层都需独立满足上述条件
最容易被忽略的是：动画是否真正“无缝”，不取决于你写了多少帧，而取决于位移值是否严格匹配图像物理尺寸或容器几何尺寸。单位、基准、裁剪、首尾一致性，四个点缺一不可。
