CSS无限滚动动画无法平滑循环问题求助

问题出在你给每个元素单独设置了动画，且位移参数错误，没有将原始内容和复制内容作为整体滚动。以下是修复方案：

核心修改思路 #

• 将原始内容与复制内容包裹在同一个滚动轨道容器中，让整个轨道整体滚动
• 调整动画位移值为轨道长度的一半，确保复制内容刚好衔接原始内容的起始位置
• 移除单个元素的动画，让元素随轨道同步移动

修改后的代码 #

HTML 部分 #

<div class="container-contribution">
  <h2>Contributors</h2>
  <div class="container-loop">
    <!-- 新增滚动轨道容器 -->
    <div class="loop-track">
      <div class="infoCtb">
        <img src="images/ChrisHadfield.jpg" alt="ChrisHadfield">
        <span>Chris Hadfield</span>
      </div>
      <div class="infoCtb">
        <img src="images/GuionBluford.jpg" alt="GuionBluford">
        <span>Guion Bluford</span>
      </div>
      <div class="infoCtb">
        <img src="images/JeremySchnittman.jpg" alt="JeremySchnittman">
        <span>Jeremy Schnittman</span>
      </div>
      <div class="infoCtb">
        <img src="images/MichelleThaller.jpg" alt="MichelleThaller">
        <span>Michelle Thaller</span>
      </div>
      <div class="infoCtb">
        <img src="images/NeildeGrasse.jpg" alt="NeildeGrasse">
        <span>Neil deGrasse</span>
      </div>
      <div class="infoCtb">
        <img src="images/NASA.jpg" alt="NASA">
      </div>
      <!-- 复制内容 -->
      <div class="infoCtb">
        <img src="images/ChrisHadfield.jpg" alt="ChrisHadfield">
        <span>Chris Hadfield</span>
      </div>
      <div class="infoCtb">
        <img src="images/GuionBluford.jpg" alt="GuionBluford">
        <span>Guion Bluford</span>
      </div>
      <div class="infoCtb">
        <img src="images/JeremySchnittman.jpg" alt="JeremySchnittman">
        <span>Jeremy Schnittman</span>
      </div>
      <div class="infoCtb">
        <img src="images/MichelleThaller.jpg" alt="MichelleThaller">
        <span>Michelle Thaller</span>
      </div>
      <div class="infoCtb">
        <img src="images/NeildeGrasse.jpg" alt="NeildeGrasse">
        <span>Neil deGrasse</span>
      </div>
      <div class="infoCtb">
        <img src="images/NASA.jpg" alt="NASA">
      </div>
    </div>
  </div>
</div>

CSS 部分 #

.container-contribution {
  width: 45%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
}

.container-loop {
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #111 20%, #fff 80%, transparent);
}

/* 滚动轨道样式 */
.loop-track {
  display: flex;
  gap: 2%;
  animation: loop 30s linear infinite;
}

.container-loop img {
  height: 100%;
  max-height: 350px;
  width: auto;
}

.infoCtb {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 40%;
  /* 移除单个元素的动画 */
}

@keyframes loop {
  from {
    transform: translateX(0%);
  }
  to {
    /* 轨道包含两份内容，滚动-50%刚好让复制内容衔接原始内容开头 */
    transform: translateX(-50%);
  }
}

关键说明 #

1. 整体轨道滚动：所有元素在同一个轨道容器内，避免单个元素动画不同步导致的断层
2. 位移值-50%：轨道总长度是原始内容的2倍，滚动一半长度时，视觉上复制的内容刚好接上原始内容的起始位置，实现无缝循环
3. 保持linear动画：匀速动画能避免速度变化带来的视觉断层

内容的提问来源于stack exchange，提问作者Maria Alejandra Espinoza