无限流文本动画CSS

Question

我希望我的动画不是空白的，当第一个字母向左溢出时，我希望它立即回到右边。我该怎么做呢？

​

.stream_text {
  position: absolute;
  padding-left: 100%;
  white-space: nowrap;
  font-size: 30px;
  text-transform: uppercase;
  animation: stream 5s linear infinite;
}
 
@keyframes stream {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

<div class="stream_text">Hello World</div>

​

谢谢

Answer 1

Overflow:hidden; 

它将允许它显示并且不为空

Answer 2

我找到了一个基于this answer的解决方案。

添加具有相同动画但有延迟的第二个文本。

下面是我的最终代码：https://codepen.io/MlleBz/pen/mdrjrNr

<div class="stream_text">Hello World</div>
<div class="stream_text stream_text-delay">Hello World</div>

 .stream_text
  position: absolute
  top: 20vh
  padding-left: 100%
  font-size: 20vh
  text-transform: uppercase
  white-space: nowrap
  overflow: hidden
  color: #f78725
  animation: stream 5s infinite linear

.stream_text-delay
  color: #7818d9
  animation-delay: 2.5s

@keyframes stream
  0%
    transform: translateX(0%)
  100%
    transform: translateX(-130%)

谢谢！