求助：无限轮播图完成一轮滚动时出现卡顿的原因

你的轮播图在一轮滚动结束时出现卡顿，本质是当前的两个动画（scroll和scroll-2）在循环衔接时存在瞬间跳变：当scroll走到100%，元素会立刻从calc(-150px * 10)的位置跳回0，视觉上就产生了卡顿感。

修复方案 #

放弃两个反向动画的切换逻辑，改用单循环动画+内容副本的方案实现无缝滚动：

1. 调整动画代码：

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

2. 布局配套调整：

• 把轮播里的内容元素完整复制一份，让容器内有两组完全相同的内容（比如原来10个元素变成20个）
• 给承载内容的容器设置width: 200%，确保两组内容能横向排列
• 给动画添加linear infinite属性，保持匀速滚动且无限循环

为什么这样能解决卡顿？ #

当动画执行到100%时，容器刚好向左滚动了自身一半的宽度，此时第二组内容会精准衔接第一组内容的位置。因为两组内容完全一致，视觉上不会出现任何跳变，完美实现无缝无限滚动。

内容的提问来源于stack exchange，提问作者Minh Hải