如何反转CSS滚动文本动画方向并实现文本初始填满容器

如何反转CSS滚动文本动画方向并实现文本初始填满容器

阿华AIGC实验室

2026-4-20

如何反转CSS滚动文本动画方向并实现文本初始填满容器

嘿，我来帮你搞定这个滚动文本的反转问题！咱们一步步调整代码，让它从左往右平滑滚动，而且一开始就把容器填满，没有任何空白。

核心修改思路

原代码的滚动逻辑是向左无缝循环，我们需要反转动画的平移方向，同时调整文本集合的切换位置，保证初始状态容器被完全填满，滚动过程无缝衔接。

修改后的完整代码

<!DOCTYPE html>
<html>
<head>
<style>
.scrolling-text {
  width: 100%;
  height: 46px;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
  background-color: #000000;
}

.ticker {
  display: inline-block;
  margin-top: 10px;
  animation: marquee 80s linear infinite;
}

.item-collection-1 {
  position: relative;
  left: 0%;
  animation: swap 80s linear infinite;
}

.item {
  display: inline-block;
  padding: 0 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #00E4A2;
  text-transform: uppercase;
}

.item::after {
  content: '•';
  position: relative;
  left: 17px;
  right: auto;
}

/* 调整后的动画 */
@keyframes marquee {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes swap {
  0%,
  50% {
    left: 0%;
  }
  50.01%,
  100% {
    left: -100%;
  }
}
</style>
</head>
<body>
<div class="scrolling-text">
  <div class="ticker">
    <span class="item-collection-1">
      <span class="item">Some Text Here</span><span class="item">Some Text Here</span><span class="item">Some Text Here</span><span class="item">Some Text Here</span><span class="item">Some Text Here</span><span class="item">Some Text Here</span>
      <span class="item">Some Text Here</span><span class="item">Some Text Here</span><span class="item">Some Text Here</span><span class="item">Some Text Here</span><span class="item">Some Text Here</span><span class="item">Some Text Here</span><span class="item">Some Text Here</span>
      <span class="item">Some Text Here</span><span class="item">Some Text Here</span><span class="item">Some Text Here</span><span class="item">Some Text Here</span><span class="item">Some Text Here</span><span class="item">Some Text Here</span><span class="item">Some Text Here</span>
    </span>
    <span class="item-collection-2">
      <span class="item">Some Text Here</span><span class="item">Some Text Here</span><span class="item">Some Text Here</span><span class="item">Some Text Here</span><span class="item">Some Text Here</span><span class="item">Some Text Here</span>
      <span class="item">Some Text Here</span><span class="item">Some Text Here</span><span class="item">Some Text Here</span><span class="item">Some Text Here</span><span class="item">Some Text Here</span><span class="item">Some Text Here</span><span class="item">Some Text Here</span>
      <span class="item">Some Text Here</span><span class="item">Some Text Here</span><span class="item">Some Text Here</span><span class="item">Some Text Here</span><span class="item">Some Text Here</span><span class="item">Some Text Here</span><span class="item">Some Text Here</span>
    </span>
  </div>
</div>
</body>
</html>

关键修改点说明

反转主滚动动画（marquee）
- 初始位置设置为transform: translateX(-100%)，这样第二个文本集合刚好在容器左侧外，第一个集合完全填满容器，解决了初始空白的问题。
- 动画结束位置回到transform: translateX(0)，让整个文本容器向右移动，实现从左到右的滚动效果。
调整文本集合切换动画（swap）
- 把原来的left: 100%改成left: -100%，让第一个文本集合滚动到容器左侧外，而不是右侧，和主动画方向保持一致，保证滚动的连续性。
修正分隔符位置
- 把.item::after的right: -17px改成left: 17px，确保每个文本项后的圆点分隔符始终显示在正确的位置。

这样修改后，你就能得到一个初始无空白、从左到右无缝循环的滚动文本条啦！

备注：内容来源于stack exchange，提问作者Randall Jamison

火山引擎最新活动

方舟 Coding Plan

模型自由，工具不限，最新支持 DeepSeek-V4 系列与 GLM-5.1，受邀下单叠加9.5折

ArkClaw

7×24在线专属智能伙伴

Seedance 2.0 全面开放 API

创作无限可能，一键生成电影级 AI 视频

新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠