html - 具有延迟和外观的水平滚动文本问题

Question

当我在第二个文本上添加动画延迟时，第一个出现时没有移动。而且我没有成功地让文本滚动无限循环。动画结束时总会有一些断点。

我尝试了几个在网上找到的代码，但没有一个完全符合我的要求。

.scroll span {
  font-size: 1.5em;
  animation: scroll 20s linear infinite;
  position: absolute;
  top: 92vh;
  white-space: nowrap;
  overflow: hidden;
}

.second span {
  animation-delay: 10s;
}

@keyframes scroll {
  0% {
    transform: translate(-100%, 0);
  }
  100% {
    transform: translate(100%, 0);
  }
}

<div>
  <p class="scroll first"><span>scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down </span></p>
  <p class="scroll second"><span>scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down </span></p>
</div>

我只想要一个无限滚动的文本。

Answer 1

第二个动画出现延迟的原因是您将动画设置为从 -100% 到 100%，这实际上是 2 个动画周期。因此，您的动画中有大约 1 个周期的空白中断。把它想象成一个圆圈移动的文本。从 -100% 到 0，文本在屏幕上移动，但从 0 到 100%，文本在屏幕外绕回起点。你的动画应该从 -100% 到 0。

您还需要将 display: inline-block 和 padding-left: 100% 添加到 .scroll span 以保持 2 span 标签并排。

.scroll {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  font-size: 1.5em;
  position: absolute;
  top: 92vh;
  white-space: nowrap;
}

.scroll span {
  display: inline-block;
  padding-left: 100%;
  animation: scroll 20s linear infinite;
}

.second span {
  animation-delay: 10s;
}

@keyframes scroll {
  0% {
    transform: translate(-100%, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}

<div>
  <p class="scroll">
    <span>scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down&nbsp;</span>
  </p>
  <p class="scroll second">
    <span> scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down&nbsp;</span>
  </p>
</div>