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

【问题标题】：Infinite horizontal scroll has white space at end of div无限水平滚动在 div 的末尾有空白
【发布时间】：2021-04-02 22:51:38
【问题描述】：

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

【问题讨论】：

你在说什么空白？请截图。
当动画 100% 设置为 transform: translateX(-100%) 时，我添加了一个包含 div 后空格的屏幕截图

标签： javascript html css animation css-animations

【解决方案1】：

在动画中添加 50% 如下：

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

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

【讨论】：

所有这些都会导致 div 在 50% 处改变方向
在浏览器中使用检查元素来调试此错误。
我看过检查元素，老实说我不知道从哪里开始