动画结束回跳是因终点与起点内容不一致，需复制首图至末尾并设容器宽(n+1)×100%、位移终点为-100%、timing-function用linear，或改用双组并列结构（宽200%、位移-50%）提升容错性。
为什么translateX(0)到translateX(-100%)会跳帧
直接用单组图片 + @keyframes 动画，动画结束时会瞬间回跳到起点，造成视觉断裂。根本原因是：动画终点（-100%）对应的是最后一张图的右边缘，而起点（0%）是第一张图的左边缘，二者内容不同，无法自然衔接。
解决思路不是“修动画”，而是“改内容布局”——让终点视觉上等于起点。常见做法是复制首张图放到末尾，但必须同步调整容器宽度和位移距离，否则位移超出范围或不足都会露白。
-
.carousel-track宽度必须设为(N + 1) × 100%（N 是原始图片数），比如 3 张图就设width: 400% -
@keyframes的终点位移必须是-100%（即移动“一张图宽度”），不能写-25%或-33.333%—— 后者只在图片等宽且容器设为N × 100%时才成立，极易出错 - 所有图片需用
flex水平排列，且不换行：white-space: nowrap或display: flex+flex-wrap: nowrap
animation-timing-function选linear还是ease-in-out
无缝滚动要求位移速度恒定，否则在首尾衔接点会出现加速/减速导致的“拖影感”或“顿挫感”。用 ease-in-out 会让动画在开始和结束时变慢，恰好卡在克隆图与原图交界处，用户会明显察觉切换节奏变化。
linear 是唯一安全选择。如果想模拟“惯性滑动”效果，应该用 JS 控制动画暂停/重置时机，而不是靠 CSS 缓动函数欺骗视觉。
- 务必显式声明：
animation-timing-function: linear，不要依赖浏览器默认值 - 避免混用多个动画属性（如同时设
animation简写和单独的animation-timing-function），后者可能被简写覆盖 - 若需暂停/恢复，用
animation-play-state: paused / running，它不影响 timing function 的行为
克隆图放末尾 vs 双组并列：哪个更稳
两种结构都能实现无缝，但容错性和调试难度差异很大。末尾克隆（N+1 张）结构简单，但对位移终点精度极度敏感；双组并列（2×N 张）把“衔接点”从动画终点移到了中间，天然避开回跳风险。
双组方案的 width 固定为 200%，@keyframes 终点固定为 -50%，参数完全解耦于图片数量，改图不用调样式。而 N+1 方案每次增减图片都要同步改 width 和 translateX 值，漏一个就露白。
- 双组结构 HTML 更冗余，但 CSS 更健壮：
.carousel-track { width: 200%; animation: scroll 8s linear infinite; } - 双组方案必须确保两组图片 DOM 顺序严格一致，否则克隆内容错位会导致衔接失败
- 如果图片宽高不一，双组方案仍需配合
gap和flex-shrink: 0防压缩，否则第二组可能被挤变形
容易被忽略的will-change和overflow陷阱
滚动动画卡顿往往不是因为逻辑错，而是渲染层没触发硬件加速，或容器裁剪失效。很多教程只写 overflow: hidden，却没强调父容器必须有明确尺寸（width/height）或 contain: layout paint，否则 overflow 可能不生效，导致克隆图溢出可见区域。
will-change: transform 是关键提示，但它必须加在被动画的元素（即 .carousel-track）上，且仅在动画期间启用才有意义。滥用会导致内存占用上升，甚至引发 Safari 的渲染 bug。
-
.carousel-container必须设width和height，不能仅靠max-width或aspect-ratio（部分旧浏览器不支持） -
overflow: hidden要写在.carousel-container，而不是.carousel-track—— 后者是移动元素，裁剪应由静止容器完成 - 响应式场景下，用
calc()计算图片宽度时，要确保gap值参与运算，否则缩放后间隙错位会撕裂衔接点
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
