CSS Keyframes文本持续滚动动画问题：解决动画结束时的突兀截断现象

你的问题核心在于动画的起始与结束状态没有做到视觉无缝衔接——当前动画只让文本移动了自身宽度的50%，当动画循环回到初始位置时，文本会瞬间跳回，导致突兀的截断感。要实现持续流畅的滚动，关键是让动画的结束状态和起始状态看起来完全一致，这样循环时就不会有跳转。

这里给你一个简单有效的解决方案：

步骤1：复制文本内容，让滚动容器总宽度翻倍 #

我们需要让滚动内容在视觉上呈现“无限”感，所以可以复制一份相同的文本放在原文本右侧，这样当第一份文本滚出视野时，第二份文本刚好能接上。

步骤2：调整动画的滚动范围 #

把动画终点从translateX(-50%)改成translateX(-100%)，这样滚动距离刚好是两份文本的总宽度，动画结束时第二份文本的位置和初始时第一份文本的位置完全一致，循环时就不会有突兀跳转。

修改后的完整代码示例：

HTML（以SVG场景为例，适配你的原text元素）

<svg width="400" height="100">
  <g class="scroll-container">
    <text x="0" y="50" font-size="20">这是需要滚动的目标文本内容</text>
    <text x="100%" y="50" font-size="20">这是需要滚动的目标文本内容</text>
  </g>
</svg>

CSS

.scroll-container {
  /* 确保文本始终在同一行，不换行 */
  white-space: nowrap;
}

.scroll-container text {
  opacity: 0.5;
  stroke: #bec1ce;
  /* 保留你原有的动画时长和线性速度 */
  animation: scrollText 5s infinite linear;
}

@keyframes scrollText {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}

原理说明 #

当动画执行到translateX(-100%)时，第一份文本完全滚出左侧视野，而第二份文本刚好移动到原第一份文本的初始位置。此时动画循环回到translateX(0%)，视觉上完全看不出变化，从而实现持续流畅的滚动效果。

如果你的文本是HTML的<span>或<div>，思路完全一致：用容器包裹两个相同文本元素，设置容器为display: flex或inline-block，再应用上述动画即可。

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