css - 无限流文字动画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>

谢谢

标签： csscss-animations

Answer 1

Overflow:hidden; 

它将允许它显示而不是空白