纯CSS实现横向滚动Logo行问题排查

DevOps 小满

2026-8-22

横向自动滚动Logo列表的问题修复方案

核心问题分析

无法显示全部Logo：原动画使用alternate属性，导致滑块滚动到终点后反向回滚，仅能展示前半部分Logo，后续内容永远无法进入视野。
滚动速度过快：5秒的动画时长过短，且位移逻辑未匹配滑块总长度，导致滚动节奏失控。
位移计算错误：margin-left: -100%中的百分比参考容器宽度而非滑块总宽度，无法支撑完整内容滚动。

修复步骤及代码调整

1. 调整动画逻辑，移除反向滚动

删除alternate属性，让动画保持单向无限滚动，确保所有Logo依次通过视野。同时改用transform: translateX替代margin-left，提升动画性能。

2. 实现无缝滚动（可选但推荐）

在滑块内复制一份Logo内容，当第一组Logo滚出视野时，第二组刚好衔接，避免出现空白间隙。

3. 调整动画时长，匹配内容长度

根据Logo总数量调整动画时长，保证滚动速度平缓。

修复后的完整代码

CSS代码

.logo-slider-container {
  margin: 0;
  background: limegreen;
  position: relative;
  overflow: hidden;
}

.logo-slider {
  display: flex;
  animation: scrollHor 30s infinite linear; /* 移除alternate，延长时长 */
}

.logo-slider > img {
  width: 200px;
  height: 75px;
  margin-right: 50px;
  object-fit: contain;
}

@keyframes scrollHor {
  0% {
    transform: translateX(0); /* 用transform替代margin-left，性能更优 */
  }
  100% {
    transform: translateX(-50%); /* 因复制了一份内容，滚动50%即可无缝循环 */
  }
}

HTML代码（添加无缝复制的Logo组）

<div class="logo-slider-container">
  <div class="logo-slider">
    <!-- 原Logo组 -->
    <img alt="client logo" src="https://d1pnnwteuly8z3.cloudfront.net/images/25535d90-e795-464a-8434-cc304cb2dad8/5953ca02-442e-41e1-89ff-aca1a4ad48ef.svg" />
    <img alt="client logo" src="https://d1pnnwteuly8z3.cloudfront.net/images/25535d90-e795-464a-8434-cc304cb2dad8/9f2b6aa9-4f28-49da-997c-d40dd37c92e3.svg" />
    <img alt="client logo" src="https://d1pnnwteuly8z3.cloudfront.net/images/25535d90-e795-464a-8434-cc304cb2dad8/557b5422-9c3b-49bd-9837-10ba17b36ebe.svg" />
    <img alt="client logo" src="https://d1pnnwteuly8z3.cloudfront.net/images/25535d90-e795-464a-8434-cc304cb2dad8/75cb6df8-f13c-4a53-b204-a0eca47d0c97.svg" />
    <img alt="client logo" src="https://d1pnnwteuly8z3.cloudfront.net/images/25535d90-e795-464a-8434-cc304cb2dad8/d1fa74b5-c9ef-486b-a2c6-b5ff973985f6.svg" />
    <img alt="client logo" src="https://d1pnnwteuly8z3.cloudfront.net/images/25535d90-e795-464a-8434-cc304cb2dad8/0fc41128-ee5d-477d-8d4d-8b6789762dfa.svg" />
    <img alt="client logo" src="https://d1pnnwteuly8z3.cloudfront.net/images/25535d90-e795-464a-8434-cc304cb2dad8/b55c30a9-93c7-4e20-a848-537f5a45b844.svg" />
    <img alt="client logo" src="https://d1pnnwteuly8z3.cloudfront.net/images/25535d90-e795-464a-8434-cc304cb2dad8/41fb926d-6ed3-45c1-96fc-b18a46a7575a.svg" />
    <img alt="client logo" src="https://d1pnnwteuly8z3.cloudfront.net/images/25535d90-e795-464a-8434-cc304cb2dad8/e616b296-1c1d-4599-ae41-af761f0e090b.svg" />
    <img alt="client logo" src="https://d1pnnwteuly8z3.cloudfront.net/images/25535d90-e795-464a-8434-cc304cb2dad8/99d0a342-c525-421e-9416-d2da2510433a.svg" />
    <img alt="client logo" src="https://d1pnnwteuly8z3.cloudfront.net/images/25535d90-e795-464a-8434-cc304cb2dad8/d172be64-fdc3-41fc-acdc-e5c336cbeaa8.svg" />
    <img alt="client logo" src="https://d1pnnwteuly8z3.cloudfront.net/images/25535d90-e795-464a-8434-cc304cb2dad8/9b7fd7a1-48f0-49e7-b041-b2736c310997.svg" />
    <img alt="client logo" src="https://d1pnnwteuly8z3.cloudfront.net/images/25535d90-e795-464a-8434-cc304cb2dad8/41728d40-b08b-47f5-bce0-573738249ba4.svg" />
    <img alt="client logo" src="https://d1pnnwteuly8z3.cloudfront.net/images/25535d90-e795-464a-8434-cc304cb2dad8/9b17e24f-1b4e-46d9-96ae-a543d7514244.svg" />
    <!-- 复制的Logo组，实现无缝滚动 -->
    <img alt="client logo" src="https://d1pnnwteuly8z3.cloudfront.net/images/25535d90-e795-464a-8434-cc304cb2dad8/5953ca02-442e-41e1-89ff-aca1a4ad48ef.svg" />
    <img alt="client logo" src="https://d1pnnwteuly8z3.cloudfront.net/images/25535d90-e795-464a-8434-cc304cb2dad8/9f2b6aa9-4f28-49da-997c-d40dd37c92e3.svg" />
    <img alt="client logo" src="https://d1pnnwteuly8z3.cloudfront.net/images/25535d90-e795-464a-8434-cc304cb2dad8/557b5422-9c3b-49bd-9837-10ba17b36ebe.svg" />
    <img alt="client logo" src="https://d1pnnwteuly8z3.cloudfront.net/images/25535d90-e795-464a-8434-cc304cb2dad8/75cb6df8-f13c-4a53-b204-a0eca47d0c97.svg" />
    <img alt="client logo" src="https://d1pnnwteuly8z3.cloudfront.net/images/25535d90-e795-464a-8434-cc304cb2dad8/d1fa74b5-c9ef-486b-a2c6-b5ff973985f6.svg" />
    <img alt="client logo" src="https://d1pnnwteuly8z3.cloudfront.net/images/25535d90-e795-464a-8434-cc304cb2dad8/0fc41128-ee5d-477d-8d4d-8b6789762dfa.svg" />
    <img alt="client logo" src="https://d1pnnwteuly8z3.cloudfront.net/images/25535d90-e795-464a-8434-cc304cb2dad8/b55c30a9-93c7-4e20-a848-537f5a45b844.svg" />
    <img alt="client logo" src="https://d1pnnwteuly8z3.cloudfront.net/images/25535d90-e795-464a-8434-cc304cb2dad8/41fb926d-6ed3-45c1-96fc-b18a46a7575a.svg" />
    <img alt="client logo" src="https://d1pnnwteuly8z3.cloudfront.net/images/25535d90-e795-464a-8434-cc304cb2dad8/e616b296-1c1d-4599-ae41-af761f0e090b.svg" />
    <img alt="client logo" src="https://d1pnnwteuly8z3.cloudfront.net/images/25535d90-e795-464a-8434-cc304cb2dad8/99d0a342-c525-421e-9416-d2da2510433a.svg" />
    <img alt="client logo" src="https://d1pnnwteuly8z3.cloudfront.net/images/25535d90-e795-464a-8434-cc304cb2dad8/d172be64-fdc3-41fc-acdc-e5c336cbeaa8.svg" />
    <img alt="client logo" src="https://d1pnnwteuly8z3.cloudfront.net/images/25535d90-e795-464a-8434-cc304cb2dad8/9b7fd7a1-48f0-49e7-b041-b2736c310997.svg" />
    <img alt="client logo" src="https://d1pnnwteuly8z3.cloudfront.net/images/25535d90-e795-464a-8434-cc304cb2dad8/41728d40-b08b-47f5-bce0-573738249ba4.svg" />
    <img alt="client logo" src="https://d1pnnwteuly8z3.cloudfront.net/images/25535d90-e795-464a-8434-cc304cb2dad8/9b17e24f-1b4e-46d9-96ae-a543d7514244.svg" />
  </div>
</div>

额外说明

动画时长30s可根据Logo总数量调整：内容越多，时长应越长，保证滚动速度均匀平缓。
若不需要无缝滚动，可移除复制的Logo组，将动画关键帧改为transform: translateX(calc(-100% + 100vw))，但滚动到终点后会直接跳回起点，出现间隙。

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