Logo轮播无法平滑无限循环，多屏幕尺寸下重置异常求助

问题根源 #

1. 原动画使用translateX(-50%)，但滑动容器宽度并非始终是可视区域的2倍，导致动画结束时内容无法和起始状态无缝衔接，出现跳变。
2. 媒体查询中错误给flex布局的.logo-sub-container添加grid-template-columns属性，导致布局冲突。
3. 遮罩宽度用固定值250px，在小屏幕上会遮挡过多内容。

修复后的完整代码 #

CSS 代码 #

@keyframes slide {
    0% {
        transform: translateX(0);
    }
    100% {
        /* 滑动距离改为单份内容的宽度，对应两份内容的容器 */
        transform: translateX(-100%);
    }
}

.carousel-container {
    overflow: hidden;
    padding: 60px 0;
    background: white;
    position: relative;
}

.carousel-container::before,
.carousel-container::after {
    position: absolute;
    top: 0;
    /* 用vw单位适配不同屏幕，避免小屏幕遮罩过宽 */
    width: 15vw;
    max-width: 250px;
    height: 100%;
    content: "";
    z-index: 2;
}

.carousel-container::before {
    left: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
}

.carousel-container::after {
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
}

.carousel-container:hover .logos-slide {
    animation-play-state: paused;
}

.logo-sub-container {
    display: flex;
    gap: 2.5rem;
    align-items: center;
    /* 去掉margin auto，避免容器宽度被限制 */
    animation: 35s slide infinite linear;
}

/* 添加这个类来包裹单份logo内容，方便复制 */
.logo-group {
    display: flex;
    gap: 2.5rem;
    align-items: center;
}

.trusted-logo-tag {
    display: block;
    margin-bottom: 2rem;
    text-align: center;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
}

.trusted-logo-image {
    height: 50px;
    margin: 0 40px;
    max-width: 300px;
    flex-shrink: 0; /* 防止logo在小屏幕被压缩 */
}

/* Small */
@media (min-width: 640px) {
}

/* Medium */
@media (min-width: 768px) {
    /* 移除错误的grid属性，保持flex布局 */
}

/* Large */
@media (min-width: 1024px) {
    .trusted-logo-tag {
        margin-bottom: 2.25rem;
    }

    .trusted-logo-image {
        max-width: 290px;
    }
}

HTML 代码 #

<section class="logo-container-section">
  <div class="all-logo-container">
      <span class="trusted-logo-tag"> logos </span>
      <div class="carousel-container">
          <div class="logo-sub-container logos-slide">
              <!-- 第一份logo内容 -->
              <div class="logo-group">
                  <div>
                      <img
                          loading="lazy"
                          width="200"
                          height="50"
                          src="/static/images/logos/b.svg"
                          class="trusted-logo-image"
                          alt=""
                          decoding="async"
                      />
                  </div>
                  <div>
                      <img
                          loading="lazy"
                          width="200"
                          height="50"
                          src="/static/images/logos/a.svg"
                          class="trusted-logo-image"
                          alt=""
                          decoding="async"
                      />
                  </div>
                  <div>
                      <img
                          loading="lazy"
                          width="200"
                          height="50"
                          src="/static/images/logos/b.svg"
                          class="trusted-logo-image"
                          alt=""
                          decoding="async"
                      />
                  </div>
                  <div>
                      <img
                          loading="lazy"
                          width="200"
                          height="50"
                          src="/static/images/logos/a.svg"
                          class="trusted-logo-image"
                          alt=""
                          decoding="async"
                      />
                  </div>
                  <div>
                      <img
                          loading="lazy"
                          width="200"
                          height="50"
                          src="/static/images/logos/b.svg"
                          class="trusted-logo-image"
                          alt=""
                          decoding="async"
                      />
                  </div>
                  <div>
                      <img
                          loading="lazy"
                          width="200"
                          height="50"
                          src="/static/images/logos/a.svg"
                          class="trusted-logo-image"
                          alt=""
                          decoding="async"
                      />
                  </div>
                  <div>
                      <img
                          loading="lazy"
                          width="200"
                          height="50"
                          src="/static/images/logos/b.svg"
                          class="trusted-logo-image"
                          alt=""
                          decoding="async"
                      />
                  </div>
                  <div>
                      <img
                          loading="lazy"
                          width="200"
                          height="50"
                          src="/static/images/logos/a.svg"
                          class="trusted-logo-image"
                          alt=""
                          decoding="async"
                      />
                  </div>
              </div>
              <!-- 复制一份相同的logo内容，实现无缝循环 -->
              <div class="logo-group">
                  <div>
                      <img
                          loading="lazy"
                          width="200"
                          height="50"
                          src="/static/images/logos/b.svg"
                          class="trusted-logo-image"
                          alt=""
                          decoding="async"
                      />
                  </div>
                  <div>
                      <img
                          loading="lazy"
                          width="200"
                          height="50"
                          src="/static/images/logos/a.svg"
                          class="trusted-logo-image"
                          alt=""
                          decoding="async"
                      />
                  </div>
                  <div>
                      <img
                          loading="lazy"
                          width="200"
                          height="50"
                          src="/static/images/logos/b.svg"
                          class="trusted-logo-image"
                          alt=""
                          decoding="async"
                      />
                  </div>
                  <div>
                      <img
                          loading="lazy"
                          width="200"
                          height="50"
                          src="/static/images/logos/a.svg"
                          class="trusted-logo-image"
                          alt=""
                          decoding="async"
                      />
                  </div>
                  <div>
                      <img
                          loading="lazy"
                          width="200"
                          height="50"
                          src="/static/images/logos/b.svg"
                          class="trusted-logo-image"
                          alt=""
                          decoding="async"
                      />
                  </div>
                  <div>
                      <img
                          loading="lazy"
                          width="200"
                          height="50"
                          src="/static/images/logos/a.svg"
                          class="trusted-logo-image"
                          alt=""
                          decoding="async"
                      />
                  </div>
                  <div>
                      <img
                          loading="lazy"
                          width="200"
                          height="50"
                          src="/static/images/logos/b.svg"
                          class="trusted-logo-image"
                          alt=""
                          decoding="async"
                      />
                  </div>
                  <div>
                      <img
                          loading="lazy"
                          width="200"
                          height="50"
                          src="/static/images/logos/a.svg"
                          class="trusted-logo-image"
                          alt=""
                          decoding="async"
                      />
                  </div>
              </div>
          </div>
      </div>
  </div>
</section>

核心修复点 #

• 无缝循环逻辑：通过复制一份完全相同的logo组，让滑动容器总宽度为单份内容的2倍，动画滑动距离设为-100%，此时动画结束时的内容和起始状态完全一致，实现无跳变的无限循环。
• 布局冲突修复：移除媒体查询中错误的grid-template-columns属性，保持flex布局的一致性。
• 响应式优化：将遮罩宽度改为15vw并限制最大值，适配不同屏幕尺寸；给logo添加flex-shrink: 0防止小屏幕下被压缩变形。
• 容器宽度调整：去掉.logo-sub-container的margin: auto，避免其宽度被限制在可视区域内，确保滑动容器能完整容纳两份logo内容。

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