仅用CSS实现的Logo轮播滑块动画无法启动，如何排查解决

核心问题定位 #

• 动画属性语法错误：animation属性中重复定义了缓动函数ease和linear，参数顺序不符合CSS规范，导致动画属性解析失败，无法触发动画
• 渐变属性参数错误：遮罩渐变的色值错误写为width，实际应为white
• 无缝滚动逻辑缺失：仅设置了10个logo的滚动距离，但容器内只有1组10个logo，滚动结束后会出现跳变，无法实现平滑循环

修复后的代码 #

CSS代码 #

.slider {
  width: 960px;
  height: 100px;
  overflow: hidden;
  position: relative;
  margin: auto;
}

.slider::before,
.slider::after {
  content: "";
  position: absolute;
  width: 200px;
  height: 100px;
  /* 修复渐变色值错误 */
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  z-index: 2;
}

.slider::before {
  top: 0;
  left: 0;
}

.slider::after {
  top: 0;
  right: 0;
  transform: rotateZ(180deg);
}

.slider .slide img {
  width: 200px;
  height: 100px;
}

.slider .slider-track {
  display: flex;
  width: calc(200px * 20);
  /* 修复动画属性语法错误，移除多余的ease参数，调整顺序符合规范 */
  animation: scroll 4s linear 3s infinite;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-200px * 10));
  }
}

HTML代码 #

需要在原有10个slide之后，再复制一遍相同的10个slide，实现无缝滚动：

<div class="slider">
  <div class="slider-track">
    <!-- 原有10个logo -->
    <div class="slide">
      <img src="./1.png">
    </div>
    <div class="slide">
      <img src="./2.png">
    </div>
    <div class="slide">
      <img src="./3.png">
    </div>
    <div class="slide">
      <img src="./4.png">
    </div>
    <div class="slide">
      <img src="./5.png">
    </div>
    <div class="slide">
      <img src="./6.png">
    </div>
    <div class="slide">
      <img src="./7.png">
    </div>
    <div class="slide">
      <img src="./8.png">
    </div>
    <div class="slide">
      <img src="./9.png">
    </div>
    <div class="slide">
      <img src="./10.png">
    </div>
    <!-- 新增复制的10个logo，用于无缝衔接 -->
    <div class="slide">
      <img src="./1.png">
    </div>
    <div class="slide">
      <img src="./2.png">
    </div>
    <div class="slide">
      <img src="./3.png">
    </div>
    <div class="slide">
      <img src="./4.png">
    </div>
    <div class="slide">
      <img src="./5.png">
    </div>
    <div class="slide">
      <img src="./6.png">
    </div>
    <div class="slide">
      <img src="./7.png">
    </div>
    <div class="slide">
      <img src="./8.png">
    </div>
    <div class="slide">
      <img src="./9.png">
    </div>
    <div class="slide">
      <img src="./10.png">
    </div>
  </div>
</div>

可选：JavaScript实现版本 #

如果需要更灵活的控制（比如悬停暂停、动态增减logo），可以用JS实现，无需手动复制元素：

const track = document.querySelector('.slider-track');
// 自动复制子元素实现无缝
track.innerHTML += track.innerHTML;
let position = 0;
const speed = 1; // 滚动速度，数值越大越快

// 滚动逻辑
function animate() {
  position -= speed;
  // 滚动完第一组后重置位置
  if (position <= -200 * 10) {
    position = 0;
  }
  track.style.transform = `translateX(${position}px)`;
  requestAnimationFrame(animate);
}

// 悬停暂停功能
let isPause = false;
track.addEventListener('mouseenter', () => isPause = true);
track.addEventListener('mouseleave', () => isPause = false);

function run() {
  if (!isPause) {
    animate();
  }
  requestAnimationFrame(run);
}
// 延迟3秒启动，和原有CSS逻辑一致
setTimeout(run, 3000);

使用JS版本时删除CSS里的animation相关代码即可。

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