background-position动画需单位统一、位移精准、容器裁剪到位；单位混用（如vw与px）导致插值失败；推荐用px，若用%则容器宽高须固定；background-size禁用cover/contain；位移量须等于图像原始宽度；容器必须overflow:hidden；animation需含linear、infinite及匹配速度的duration。
直接用 background-position 做动画就能实现，但必须满足三个硬性条件：单位统一、位移量精准、容器裁剪到位，缺一不可。
background-position 动画为什么不动或卡顿
最常见原因是单位混用或基准漂移。比如写 0 0 → 100vw 0，浏览器无法插值——vw 是视口单位，px 是绝对单位，动画引擎直接放弃计算中间帧。
- 必须全程用同一单位：只用
%或只用px（推荐px，更可控） - 如果用
%，容器宽高必须固定（如width: 600px; height: 400px;），否则百分比基准会随父容器缩放漂移 -
background-size: cover或contain会破坏位移可预测性，禁用
位移终点怎么算才真正无缝
关键不是“动多远”，而是“动到哪能刚好接上起点”。单图平铺滚动时，位移量必须等于图像原始像素宽度。
- 导出图是
800px × 120px？那动画终点就是background-position: -800px 0; - 用百分比方案？先设
background-size: 200% auto;，再让background-position从0% 50%动到100% 50%（此时位移量 = 图像宽度 / 容器宽度 × 100%，需手动验证） - 方向反了？把
-800px换成800px就向右滚，多数场景要向左，所以用负值
容器必须加 overflow: hidden 吗
必须。这不是可选项，是实现“局部滚动”视觉效果的物理边界。
- 没加
overflow: hidden？你会看到背景整张图往右下跑出屏幕，根本不是“滚动”，而是“位移溢出” -
position: relative不是必需的，它只在你需要叠加文字、按钮等子元素时才有用 - 容器高度必须明确，例如
height: 400px或aspect-ratio: 16/9；flex 项里被align-items: stretch拉高会导致留白，得额外设align-self: flex-start
animation 属性哪些不能省
漏掉任意一项都可能中断循环或产生跳变。
-
animation-timing-function: linear—— 用ease会导致速度不均，接缝处暴露 -
animation-iteration-count: infinite—— 不加就只播一次 -
animation-duration要匹配体验：图宽 800px，想保持 100px/s 的匀速，就设8s；太快像闪屏，太慢用户划走前还没循环完
真正容易被忽略的是图像原始尺寸和位移量的 1:1 对齐——差 1px 都可能在循环点出现半像素错位，尤其在高清屏上肉眼可见。别依赖“差不多”，导出图时记下宽高，代码里就写死那个数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
