如何用CSS实现RTL文本滚动循环？解决动画跳转问题

问题根源 #

1. 关键帧设置导致循环断层：动画从translateX(-100%)（文本完全在容器左侧外）移动到translateX(100%)（文本完全在容器右侧外），循环时会瞬间从右侧跳回左侧，视觉上出现明显跳转。
2. animation-fill-mode: forwards对无限循环动画无效——无限动画永远不会进入"结束"状态，该属性无法发挥作用。

修复方案 #

调整关键帧方向，让文本从容器右侧外部平滑进入，滚动至左侧外部后无缝衔接循环，同时优化元素样式确保动画逻辑正确：

修改后的CSS代码

div {
  overflow: hidden;
  height: 2em;
  line-height: 2em; /* 可选：让文本垂直居中 */
}

@keyframes marquee {
  0% {
    transform: translateX(100%); /* 文本初始在容器右侧外 */
  }
  100% {
    transform: translateX(-100%); /* 文本完全移出容器左侧外 */
  }
}

p {
  font-family: Arial, Helvetica, sans-serif;
  animation: marquee 10s linear infinite;
  white-space: nowrap;
  font-size: 1.9vw;
  display: inline-block; /* 确保位移基于文本自身宽度计算 */
}

对应HTML代码

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

短文本额外优化 #

如果文本长度较短，滚动时会出现空白间隙，可以复制一份文本拼接，让滚动更连续：

<div>
  <p>Lorem ipsum dolor sit amet... laborum. &nbsp;&nbsp;&nbsp;&nbsp; Lorem ipsum dolor sit amet... laborum.</p>
</div>

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