无限水平滚动在div的末尾有空白

Question

我正在尝试创建一个动画，其中包含所有卡片的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>

.container {
  position: relative;
}
.scroll-container {
  position: relative;
  animation: scroll 5s linear infinite;
}
.scroll {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  margin: 0.5rem 0;
  transform: translateX(82px);
}
@keyframes scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-1110px);
  }
}

Answer 1

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

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

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