用background-position配合@keyframes实现无限滚动，关键在于起点与终点视觉严丝合缝，必须设background-repeat:repeat（或repeat-x/repeat-y）以确保平铺，且background-size与动画位移量须严格匹配图案重复单元尺寸，否则必跳帧闪动。
直接用 background-position 配合 @keyframes 实现无限滚动，比 JS 管理坐标更稳、更轻、不卡顿。关键不是“让它动”，而是“让它动得接得上”——起点和终点视觉必须严丝合缝。
为什么 background-position 动画必须配 repeat
不设 background-repeat: repeat（或 repeat-x/repeat-y），动画只会让单张图位移一次，到边缘就停住或露底色。repeat 是平铺的前提，没有它，background-position 再怎么变也只是在挪一张图的位置。
- 若图案是 32×32px 小图标，必须设
background-size: 32px 32px+background-repeat: repeat - 若用长图模拟云朵滚动（如宽 2000px 的 PNG），则改用
repeat-x+background-size: 250vw auto，避免因容器宽度变化导致错位 - IE11 不支持
background-position负值动画过渡，遇到需降级为 JS 或改用transform方案
background-size 和位移步长怎么算才不跳帧
跳帧、细线、横竖闪动，90% 出在 background-size 和动画终点值不匹配。本质是：动画位移量必须等于图案在背景层中「一个完整重复单元」的物理尺寸。
- 图案原始尺寸 16×16px → 推荐
background-size: 16px 16px，动画终点写background-position: -16px -16px - 若用
background-size: 300% auto（图像拉伸为容器宽 3 倍），则水平位移终点必须是150%，因为300% / 2 = 150%才能闭环 - 用 SVG 或 base64 图时，导出务必关掉「自动留白」「缩放适配」，否则实际尺寸≠声明尺寸，位移必然错位
用 transform 替代 background-position 会出什么问题
不能用 transform: translateX() 去“滚动背景”，那是滚动整个元素盒，不是滚动背景层本身。后果很直接：
-
background-repeat失效——你看到的是元素在动，背景图只是被带着拖过去，不会平铺 - 如果容器有
overflow: hidden，元素一动，边缘就会裁掉部分背景，破坏无缝逻辑 - 想实现多层视差（比如远山慢、近树快），必须每层独立控制
background-position，用 transform 就得拆多个 DOM，增加重排开销
动画节奏和性能要注意什么
滚动太快易晕，太慢看不出效果，且低帧率下容易察觉重置断层。建议从这几个参数入手调：
- 动画时长设 ≥ 3s（如
animation: scroll-bg 4s linear infinite），人眼对 300ms 以上变化更难捕捉跳变 - 必须用
linear缓动——ease或ease-in-out会让速度不均，破坏“匀速滚动”的沉浸感 - 加
will-change: background-position可提示浏览器提前升层，但仅在高负载场景下启用，多数情况不需要
最常被忽略的一点：动画是否真正“无限”，取决于图案自身是否水平/垂直无缝。哪怕 CSS 全部写对，一张带白边或非整像素裁切的图，滚动起来照样露缝——动手前先用图片编辑器确认边缘对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
