无限水平滚动在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%);
      }
    }

并将动画持续时间从5s更改为10s，这样它将与之前的延迟相同。