纯CSS实现无缝无限图片轮播：解决滚动卡顿问题求助

问题分析 #

原代码的卡顿主要源于两点：未触发硬件加速导致动画渲染效率低，以及图片未填满容器宽度、布局细节处理不当。以下是优化后的纯CSS方案，既能实现图片填满容器宽度的无缝左滚动，又能彻底解决卡顿问题。

优化后代码 #

HTML

<div class="slider">
  <div class="slide-track">
    <div class="slide-img">
      <img src="1.jpg" alt="轮播图1">
      <img src="2.jpg" alt="轮播图2">
      <img src="3.jpg" alt="轮播图3">
      <img src="4.jpg" alt="轮播图4">
      <img src="5.jpg" alt="轮播图5">
    </div>
    <!-- 复制一份图片列表，实现无缝衔接 -->
    <div class="slide-img">
      <img src="1.jpg" alt="轮播图1">
      <img src="2.jpg" alt="轮播图2">
      <img src="3.jpg" alt="轮播图3">
      <img src="4.jpg" alt="轮播图4">
      <img src="5.jpg" alt="轮播图5">
    </div>
  </div>
</div>

CSS

.slider {
  overflow: hidden;
  width: 100%;
  /* 固定容器高度，避免图片加载时高度波动 */
  height: 300px;
}

.slide-track {
  display: flex;
  /* 提前告知浏览器动画属性，优化渲染 */
  will-change: transform;
  animation: scroll 40s linear infinite;
}

.slide-img {
  display: flex;
  /* 确保每个图片容器宽度与slider一致，保证滚动距离准确 */
  width: 100%;
}

.slider img {
  /* 图片填满容器宽度，高度自适应保持比例 */
  width: 100%;
  height: 100%;
  object-fit: cover; /* 可选：保持图片比例，裁剪或填充容器 */
}

@keyframes scroll {
  0% {
    /* 使用translate3d触发GPU加速，避免卡顿 */
    transform: translate3d(0, 0, 0);
  }
  100% {
    /* 滚动距离为单个slide-img的宽度，确保无缝衔接 */
    transform: translate3d(-100%, 0, 0);
  }
}

关键优化点 #

• 硬件加速：通过will-change: transform和translate3d触发GPU渲染，大幅提升动画流畅度，彻底解决卡顿问题。
• 图片适配容器：设置img的width: 100%和height: 100%，配合object-fit: cover可选属性，确保图片填满容器且比例正常。
• 无缝滚动逻辑：slide-track包含两份相同的图片列表，动画滚动距离等于单个slide-img的宽度，当第一份完全移出容器时，第二份刚好衔接，实现无限无缝效果。
• 稳定布局：固定容器高度，避免图片加载时的高度波动，保证轮播区域稳定。

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