CSS marquee跑马灯文字动画不生效 求解错误原因

你的动画不生效、达不到无缝循环效果，是几个基础CSS逻辑错误导致的，问题点如下：

• 核心错误：你在动画里修改left属性，但没有给动画元素设置非static的定位，默认静态定位下left/right/top/bottom属性全部不生效，动画自然没有任何效果
• 动画绑定对象错误：你给每个单独的文字项绑定动画，会导致每个文字各自独立位移，无法实现整体滚动的效果
• 冗余冲突属性：父容器已经设置flex布局，子元素加float: left完全无效；父容器硬编码width:10000px适配性极差，不同屏幕尺寸下很容易出现滚动空白、断层
• 动画逻辑缺陷：单组内容+left:-100%的写法没法实现无缝循环，内容移出左侧后会出现整段空白，等动画重置才会回到起点，视觉跳变非常明显

修正后可直接运行的代码 #

CSS部分 #

.marquee-wrapper {
  overflow: hidden;
  background-color: black;
  padding: 10px 0;
}
.marquee-text-content {
  display: flex;
  flex-wrap: nowrap;
  width: fit-content;
  /* 动画绑定到整个内容容器，实现整体滚动 */
  animation: marquee-animation 10s infinite linear;
}
.marquee-text {
  margin-left: 50px;
  /* 禁止flex子项收缩，避免文字被挤压变形 */
  flex-shrink: 0;
}

.marquee-text span { 
  font-style: italic;
  font-family: "Cabin", sans-serif;
  font-size: 2.3vw; 
  color: #F0F0F0;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 2px;
}
@keyframes marquee-animation {
  from {
    transform: translateX(0);
  }
  to {
    /* 位移-50%刚好走完第一组重复内容，回到和起点完全一致的视觉位置，实现无缝循环 */
    transform: translateX(-50%);
  }
}

HTML部分 #

注意：要实现真正的无空白无缝循环，需要把滚动内容复制一份拼成两组完全相同的内容，配合translateX(-50%)的动画终点，不会有任何跳变或者空白

<div class="marquee-wrapper">
  <div class="marquee-text-content">
    <!-- 第一组滚动内容 -->
    <div class="marquee-text">
      <span class="marquee-item">Free shipping</span>
    </div>
    <div class="marquee-text">
      <span class="marquee-item">New user 20% off</span>
    </div>
    <div class="marquee-text">
      <span class="marquee-item">Limited time sale</span>
    </div>
    <!-- 第二组和第一组完全一致的内容，做无缝衔接用 -->
    <div class="marquee-text">
      <span class="marquee-item">Free shipping</span>
    </div>
    <div class="marquee-text">
      <span class="marquee-item">New user 20% off</span>
    </div>
    <div class="marquee-text">
      <span class="marquee-item">Limited time sale</span>
    </div>
  </div>
</div>

优化说明 #

• 用transform: translateX()替代left做动画，会触发GPU加速，不会引发页面重排，滚动流畅度比修改定位属性高很多
• 去掉了硬编码的宽度，内容宽度由文字本身撑开，不管屏幕尺寸、文字长度怎么变，都能正常滚动
• 双份内容+50%位移的方案是目前纯CSS实现无缝跑马灯兼容性最好、逻辑最简单的方案，不需要JS介入就能实现无空白、无跳变的无限滚动

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