如何实现多Logo图片无限连续水平右向左滚动？CSS关键帧求助

我完全理解你想要的是全程流畅、无卡顿断层的Logo滚动效果——之前那个示例的停顿问题，本质是动画结束后重置位置导致的视觉断层。要解决这个，我们需要用「内容副本拼接」的技巧，配合CSS关键帧实现真正的无缝循环。

下面是完整的可落地方案：

1. HTML结构设计 #

我们需要把Logo分成「固定显示组」和「滚动组」，并且为滚动组创建一个完全相同的副本，这样动画循环时能完美衔接：

<div class="logo-container">
  <!-- 初始显示的6张Logo -->
  <div class="static-logos">
    <img src="logo1.png" alt="品牌Logo 1">
    <img src="logo2.png" alt="品牌Logo 2">
    <img src="logo3.png" alt="品牌Logo 3">
    <img src="logo4.png" alt="品牌Logo 4">
    <img src="logo5.png" alt="品牌Logo 5">
    <img src="logo6.png" alt="品牌Logo 6">
  </div>
  <!-- 滚动容器：包含原滚动组+副本 -->
  <div class="scrolling-wrapper">
    <div class="scrolling-logos">
      <img src="logo7.png" alt="品牌Logo 7">
      <img src="logo8.png" alt="品牌Logo 8">
      <img src="logo9.png" alt="品牌Logo 9">
      <img src="logo10.png" alt="品牌Logo 10">
      <!-- 这里添加剩余的所有Logo -->
    </div>
    <!-- 滚动组的副本，用于无缝衔接 -->
    <div class="scrolling-logos">
      <img src="logo7.png" alt="品牌Logo 7">
      <img src="logo8.png" alt="品牌Logo 8">
      <img src="logo9.png" alt="品牌Logo 9">
      <img src="logo10.png" alt="品牌Logo 10">
      <!-- 完全重复上面的滚动Logo -->
    </div>
  </div>
</div>

2. CSS样式与关键帧动画 #

核心思路是让滚动容器的宽度足够容纳两个滚动组，然后通过动画让它向左移动一个滚动组的宽度——当动画结束时，副本刚好顶上来，视觉上完全没有停顿：

.logo-container {
  display: flex;
  align-items: center;
  overflow: hidden; /* 隐藏超出容器的内容 */
  width: 100%; /* 也可以设置固定宽度，比如1200px */
  gap: 24px; /* 控制Logo之间的间距 */
}

.static-logos {
  display: flex;
  gap: 24px;
  flex-shrink: 0; /* 固定宽度，不被压缩 */
}

.scrolling-wrapper {
  display: flex;
  flex-shrink: 0;
  /* linear是关键！保证动画全程匀速，没有加速减速的突兀感 */
  animation: scrollLeft 18s linear infinite;
}

.scrolling-logos {
  display: flex;
  gap: 24px;
  flex-shrink: 0; /* 每个滚动组保持自身宽度 */
}

/* 关键帧：移动距离等于单个scrolling-logos的宽度 */
@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%); /* 向左移动自身宽度的100%，刚好让副本衔接 */
  }
}

/* 可选：统一Logo尺寸 */
.logo-container img {
  width: 90px;
  height: 90px;
  object-fit: contain;
}

3. 为什么这个方案能解决停顿问题？ #

• 之前的示例动画是从0跳回0，当滚动到末尾时内容突然重置，就会出现停顿。
• 我们通过添加滚动内容的副本，让动画移动的距离刚好是单个滚动组的宽度——当动画执行到100%时，第二个滚动组完全替代第一个的位置，视觉上完全连贯，没有断层。
• linear动画曲线保证全程速度均匀，彻底避免了加速/减速带来的卡顿感。

4. 优化与适配建议 #

• 如果Logo数量会动态变化，建议用JS自动生成副本，避免手动重复代码。
• 调整18s参数可以控制滚动速度，数值越小速度越快，反之则越慢。
• 响应式场景下，可通过媒体查询调整Logo尺寸或容器宽度，保证小屏幕上的显示效果。

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