如何实现CSS Marquee动画单次滚动后短暂停顿再重复？

修改后的完整代码 #

CSS

.wrapper {
  max-width: 10%;
  overflow: hidden;
}

.marquee {
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  /* 总时长=2次滚动(7s*2) + 2次停顿(0.5s*2) */
  animation: marquee 14.5s linear infinite;
}

.marquee p {
  display: inline-block;
  /* 避免重复文本连在一起，添加间距 */
  margin-right: 1em;
}

@keyframes marquee {
  /* 初始位置：第一个文本对齐容器左侧 */
  0% {
    transform: translate3d(0, 0, 0);
  }
  /* 前7s完成第一个文本的滚动（滚出容器） */
  48.28% {
    transform: translate3d(-50%, 0, 0);
  }
  /* 停顿0.5s，保持当前位置 */
  51.72% {
    transform: translate3d(-50%, 0, 0);
  }
  /* 再用7s完成第二个文本的滚动（滚出容器） */
  98.28% {
    transform: translate3d(-100%, 0, 0);
  }
  /* 最后0.5s停顿，循环后回到初始位置（因文本重复无跳跃感） */
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

HTML

<div class="wrapper">
  <div class="marquee">
    <p>longer one again</p>
    <p>longer one again</p>
  </div>
</div>

核心改动说明 #

1. 拆分动画周期：将原单一滚动周期，拆分为「滚动-停顿-滚动-停顿」的循环，总时长包含2次7s滚动和2次0.5s停顿，合计14.5s。
2. 关键帧精准控制：通过百分比划分动画阶段，确保滚动完成后停留指定时间，再继续下一轮滚动。
3. 视觉无缝衔接：由于两个文本内容完全一致，动画循环回到初始位置时，视觉上不会出现跳跃断层。

若需调整滚动速度或停顿时长，只需修改总时长和对应关键帧的百分比即可（例如停顿1s时，总时长改为16s，关键帧百分比对应调整为43.75%、50%、87.5%、100%）。

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