如何实现无意外跳帧的平滑无限滚动效果？

嘿，我看了你的代码，问题出在动画终点和内容重复次数不匹配，导致滚动到结尾时内容衔接不上，自然就会跳帧啦。咱们一步步来解决：

问题根源 #

你现在把图片数组重复了4次，然后动画设置为滚动到translateX(-50%)——这意味着当动画结束时，你已经滚过了2组图片的宽度，此时显示的是第3组图片的开头；而动画重置时又跳回第1组的开头，中间差了整整两组，视觉上肯定会跳一下！

修复方案 #

要实现无缝无限滚动，核心是：内容容器里放2组完全相同的内容，动画滚动的距离刚好等于1组内容的宽度，这样当动画到终点时，第2组的开头刚好和第1组的开头对齐，重置动画时就完全看不出衔接痕迹。

1. 调整内容重复次数

把React里的内容从4次重复改成2次，同时记得给每个元素加key（避免React警告，也更规范）：

const InfiniteScroll = () => {    
  return (
    <div className="partners-container">
      <div className="partners mt-[40px] w-[100%] flex items-center gap-[40px]">
        {/* 只重复2组即可 */}
        {[...partnersImg, ...partnersImg].map((item, index) => (
          <React.Fragment key={index}>{item}</React.Fragment>
        ))}
      </div>
    </div>
  );
};

2. 保留正确的动画逻辑

你的CSS动画scroll-left设置的translateX(-50%)刚好对应2组内容时，滚动1组的宽度（因为总宽度是2组，50%就是1组的宽度），所以这部分不用改：

@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

额外优化建议

• 确保图片的宽度是固定的（你已经通过类设置了，很好），这样一组内容的总宽度不会变化，动画衔接更稳定。
• 保留will-change: transform，让浏览器提前优化动画渲染，更流畅。

现在你再试试，滚动应该就完全平滑，不会跳帧啦！

备注：内容来源于stack exchange，提问作者Curtis Crentsil