如何消除纯CSS无限循环跑马灯动画中的大面积空白区域？

我正在完成全栈职业方向的毕业设计，目前处于细节收尾阶段。制作了一个无限循环的跑马灯动画，但存在大面积空白区域，希望解决这个问题。

修改后的CSS代码 #

.marquee {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  width: 100%;
  z-index: 100000;
  background-color: black;
  margin-top: 25px;
  /* transform: rotate(1deg); */
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 20s linear infinite;
  color: #c9c9c9;
  font-family: nos;
}

/* 让第二个跑马灯错开半周期滚动，填补空白 */
.marquee2 span {
  animation-delay: -10s;
}

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

修改后的HTML代码 #

<p class="marquee">
  <span>KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;</span>
</p>
<p class="marquee marquee2">
  <span>KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;KURT BURGERS&nbsp;&nbsp;&nbsp;&nbsp;</span>
</p>

关键修改说明 #

• 调整.marquee2 span的动画延迟为-10s：原代码两个跑马灯同步滚动，末尾会同时出现空白。设置为动画时长的一半负值，让第二个跑马灯从动画中间开始滚动，刚好填补第一个的空白，实现无缝衔接。
• 统一文本内容：修正了原HTML中拼写错误的KURT BURGER，确保所有重复单元一致，滚动时视觉连贯。
• 保持文本重复次数：确保span内的文本足够长，配合错位滚动，避免提前出现空白。

内容的提问来源于stack exchange，提问作者user19473497