双容器交替位移更可控，因其将滚动与重置完全解耦，避免单容器克隆方案中因 animationend 延迟或 js 时机不准导致的闪屏和错位。
为什么用双容器交替位移比单容器+克隆更可控
单容器克隆方案（如 .carousel-track 里放两遍图片）在动画结束重置时，依赖 animationend 或定时器触发 scrollLeft = 0，容易因帧率抖动、CSS 动画延迟或 JS 执行时机不准导致“闪一下”或位移错位。双容器方案把“移动”和“重置”完全解耦：一个容器平滑滚动，另一个静默就位，到临界点直接切换 visibility / z-index / transform，视觉上无任何重绘中断。
HTML 结构必须满足的三个硬性条件
双容器不是随便套两层 div 就行，结构必须严格满足：
-
.carousel外层容器设overflow: hidden和固定宽高，不参与动画 - 两个内层容器（
.track-a和.track-b）必须position: absolute、top: 0; left: 0;、尺寸完全一致，且都用display: flex; white-space: nowrap; - 每个容器内的图片必须用
flex-shrink: 0+width: calc(100% / N)（N 为图片总数），不能靠flex: 0 0 auto或百分比硬编码
关键 CSS 动画与切换逻辑怎么写
核心是让两个容器以相同速度、相同位移量、但起始偏移差 100% 容器宽度来运行动画：
@keyframes scroll-double {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
.track-a {
animation: scroll-double 20s linear infinite;
}
.track-b {
animation: scroll-double 20s linear infinite;
animation-delay: -10s; /* 关键：错开一半周期 */
}
这样 .track-b 永远比 .track-a “快半拍”，当 A 刚滚完一整轮（translateX(-100%)），B 正好到达起点位置。此时无需 JS 干预，纯靠 CSS 自动接续。
响应式下最容易被忽略的致命点
所有基于百分比的位移（translateX(-100%)）都隐含一个前提：动画作用对象的宽度 = 视口宽度 × 图片数量。一旦加了 gap、padding、或图片用 object-fit: cover 导致实际渲染宽度浮动，100% 就会失准——要么滚动过头留白，要么卡住不动。
真正可靠的写法是：
- 用 JS 在加载后动态计算总宽度（含 gap），注入 CSS 变量：
style="--total-width: 6240px;" - 动画改用
transform: translateX(calc(var(--total-width) * -1)) - 或干脆放弃百分比，用
@keyframes写死像素值（仅适用于固定图数+固定容器宽场景）
双容器方案的优势只在结构层面，位移精度仍取决于你对宽度的控制是否闭环。漏掉这步，再漂亮的交替也救不回跳帧。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
