如何创建无间隙无卡顿的Marquee？求助解决滚动动画异常问题

问题说明 #

Marquee横向滚动切换时出现间隙和空白，复制段落还会产生卡顿，尝试过复制段落、匹配动画时长等方法均无效。

原代码 #

.marquee {
  width: 100vw;
  height: 50px;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.marquee p {
  display: inline-block;
  font-family: monospace;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 20px;
  white-space: nowrap;
}

.marquee-in {
  width: 100vw;
  -webkit-animation: trans 5s linear infinite;
  animation: trans 5s linear infinite;
  overflow: hidden;
  width: auto;
  height: auto;
  display: inline-flex;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

@-webkit-keyframes trans {
  0% {
    left: 0%;
  }
  100% {
    left: -100%;
  }
}

问题分析与修复方案 #

1. 间隙空白原因：原动画left: -100%仅移动容器自身宽度，未匹配复制后内容的总宽度，导致滚动到终点时无法衔接。
2. 卡顿原因：left属性动画依赖CPU计算布局，易引发卡顿；inline-flex布局可能触发不必要的重绘。
3. 冗余样式：marquee-in重复设置overflow: hidden和width，需清理。

修复后的代码 #

.marquee {
  width: 100vw;
  height: 50px;
  position: relative;
  overflow: hidden;
}

.marquee-content {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  animation: marquee-scroll 10s linear infinite;
}

.marquee p {
  font-family: monospace;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 20px;
  white-space: nowrap;
  margin: 0;
  /* 给复制内容添加容器宽度的间距，确保衔接无间隙 */
  padding-right: 100vw;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 移动单个文本块的宽度，实现无缝循环 */
    transform: translateX(-100%);
  }
}

配套HTML结构 #

需复制一次文本内容，保证滚动首尾衔接：

<div class="marquee">
  <div class="marquee-content">
    <p>你的滚动文本内容 你的滚动文本内容</p>
    <p>你的滚动文本内容 你的滚动文本内容</p>
  </div>
</div>

关键优化点 #

• 用transform: translateX()替代left，利用GPU加速减少卡顿。
• 给复制的文本块添加padding-right: 100vw，避免滚动间隙。
• 根据文本长度调整动画时长，保证滚动速度均匀自然。

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