HTML/CSS自定义Marquee跑马灯异常：内容显示不全且有空白

• 修正动画起始偏移：检查你设置的@keyframes关键帧，当前的起始偏移值大概率把A1、A2的内容直接移出了可视区域。比如如果动画是从transform: translateX(-50%)开始，刚好会切掉前半部分内容，改成0% { transform: translateX(0); }，结束值设为transform: translateX(-100%);，就能保证从第一个元素开始滚动。
• 补充重复内容消除空白：跑马灯要实现无缝滚动，必须把现有内容完整复制一份追加到原内容后面，这样滚动到末尾时能衔接开头，不会出现空白。修改.marquee-content的结构：

<div class="marquee-content">
  <span>A1 B1 C1 D1</span>
  <span>A2 B2 C2 D2</span>
  <span>A3 B3 C3 D3</span>
  <span>A4 B4 C4 D4</span>
  <span>A1 B1 C1 D1</span>
  <span>A2 B2 C2 D2</span>
  <span>A3 B3 C3 D3</span>
  <span>A4 B4 C4 D4</span>
</div>

• 调整容器宽度适配内容：给.marquee-content设置足够宽的宽度，比如width: 200%;（因为复制了一份内容），确保所有元素能在一行排列，不会被换行截断。同时确认.marquee容器设置了overflow: hidden;，只显示可视区域内的内容。
• 校准动画时长：如果动画时长过短，内容还没完全滚动就重复，也会导致显示不全。根据内容长度调整animation-duration的值，比如内容总长度是容器的2倍，时长可以设为20s左右，保证滚动速度均匀且内容完整展示。

内容的提问来源于stack exchange，提问作者the king of kings