Javascript 无限水平卷轴在div末尾有空白

我正在尝试创建一个动画，其中包含所有卡片的div从右向左滑动，我已经实现了这一点

问题是div的末端之间有一个巨大的白色间隙，当它重置时，我通过指定在

100%

处div应该翻译

-1110px

来解决这个问题，但是这会在旋转木马重置时导致口吃

我是否可以将动画重置回0%，而不会造成口吃效果？代码如下

<div className="scroll-container" id="reset">
  <div className="scroll">
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
  </div>
  <div className="scroll">
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
  </div>
</div>

---

在动画中添加50%，如下所示：

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

---

并将动画持续时间从5秒更改为10秒，使其与之前的延迟相同。

你说的是什么白间隔？请截图。我添加了一个截图，当动画100%设置为

transform:translateX（-100%）时，该截图包含div后面的空白

所有这一切都会导致div在50%Bro时改变方向，使用浏览器中的inspect元素来调试此错误。我已经查看了inspect元素，老实说，我不确定从何处开始

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