无限流文字动画CSS答案

【问题标题】：Infinite stream text animation CSS无限流文字动画CSS
【发布时间】：2021-01-10 19:53:26
【问题描述】：

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

.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%);
  }
}

&lt;div class="stream_text"&gt;Hello World&lt;/div&gt;

谢谢

【问题讨论】：

这能回答你的问题吗？ Pure CSS Continuous Horizontal Text Scroll Without Break
是的，我试过了，但是一个字就不行
终于找到了好方法！对我来说只需要 transform: translateX(-150%) 。谢谢;-)
酷。您可以添加对您有用的代码作为答案并接受它。它将帮助任何遇到此类问题的人。

标签： css css-animations

【解决方案1】：

Overflow:hidden;

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

【讨论】：

无论是否溢出，我都有相同的结果：隐藏

【解决方案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%)

谢谢！

【讨论】：