Marquee动画重置问题：如何实现无闪烁无限滚动？

这种闪烁重启的核心原因是动画执行到100%后会瞬间跳回0%初始位置，导致视觉上的断层闪烁。要实现无闪烁的无限向左滚动，最可靠的方案是双内容克隆+连续位移动画，具体实现如下：

方案一：双内容克隆无缝滚动 #

HTML结构 #

把滚动内容复制一份，放在同一个容器内：

<div class="marquee-box">
  <div class="marquee-content">
    <span>需要滚动的文本内容 需要滚动的文本内容</span>
    <span class="content-clone">需要滚动的文本内容 需要滚动的文本内容</span>
  </div>
</div>

CSS样式 #

通过动画让内容向左移动自身宽度的100%，利用克隆内容衔接原内容，实现无断层滚动：

.marquee-box {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.marquee-content {
  display: inline-block;
  /* 动画时长根据需求调整，linear保证匀速滚动 */
  animation: infinite-scroll 8s linear infinite;
}

.content-clone {
  display: inline-block;
}

@keyframes infinite-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 移动距离等于单个内容的宽度，确保克隆内容刚好接上 */
    transform: translateX(-100%);
  }
}

关键注意事项 #

• 必须使用linear作为动画时间函数，缓动函数会导致滚动速度变化，循环时容易出现卡顿。
• 如果内容是动态生成的，需要用JS计算.marquee-content的实际宽度，确保translateX(-100%)的位移距离准确。
• 容器必须设置overflow: hidden，隐藏超出视口的内容，避免出现滚动条或内容溢出。

内容的提问来源于stack exchange，提问作者THIAGO DE BONIS