如何消除图片滚动动画末尾的空白间隙？CSS动画问题求助

问题根源 #

你当前的动画从translate: 300px移动到translate: -750px，总移动距离是1050px，但三张图片总宽度仅750px，动画结束后重置到初始位置时容器内会出现空白；而去掉初始translate的话，动画从0跳回-750px再重置，视觉上会有明显跳转。

无缝滚动实现方案 #

要实现无空白、无跳转的循环滚动，核心是让动画结束时的视觉状态和起始状态完全一致。最简单的方法是复制一组图片，并调整动画关键帧的移动距离，让滚动到末尾时自然衔接开头：

修改后的代码

.container {
  outline: 1px solid red;
  width: 250px;
  overflow: hidden;
  white-space: nowrap;
}

.image-wrapper {
  /* 移除初始translate，动画从0开始 */
  animation: scroll 6s linear infinite;
}

.image-wrapper > img {
  width: 250px;
  /* 消除inline元素默认间隙 */
  display: inline-block;
}

@keyframes scroll {
  0% {
    translate: 0;
  }
  100% {
    /* 移动距离等于一组图片总宽度（3×250px） */
    translate: -750px;
  }
}

<div class="container">
  <div class="image-wrapper">
    <!-- 复制一组原图片，实现无缝衔接 -->
    <img src="https://images.unsplash.com/photo-1662590653876-49029aa90353?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60" alt="">
    <img src="https://images.unsplash.com/photo-1662556224812-06ee64dec478?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw4fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60" alt="">
    <img src="https://images.unsplash.com/photo-1662421744749-b8ce69a99c10?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxNXx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60" alt="">
    <img src="https://images.unsplash.com/photo-1662590653876-49029aa90353?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60" alt="">
    <img src="https://images.unsplash.com/photo-1662556224812-06ee64dec478?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw4fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60" alt="">
    <img src="https://images.unsplash.com/photo-1662421744749-b8ce69a99c10?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxNXx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60" alt="">
  </div>
</div>

原理说明

1. 复制图片：在image-wrapper中添加一组完全相同的图片，滚动到第一组末尾时，第二组图片会立刻接上，避免空白出现。
2. 调整动画参数：动画时长改为6秒（保持原滚动速度），关键帧移动距离等于一组图片总宽度。动画结束重置到0时，第二组的第一张图片和初始显示的第一张完全一致，不会产生跳转感。
3. 细节优化：给图片添加display: inline-block，消除默认inline元素的间隙问题。

进阶方案（无需复制图片） #

如果不想复制图片，可以通过调整关键帧百分比实现衔接，但会有短暂停顿，效果不如复制图片流畅：

.container {
  outline: 1px solid red;
  width: 250px;
  overflow: hidden;
  white-space: nowrap;
}

.image-wrapper {
  animation: scroll 3s linear infinite;
}

.image-wrapper > img {
  width: 250px;
  display: inline-block;
}

@keyframes scroll {
  0%, 10% {
    translate: 0;
  }
  90%, 100% {
    translate: -750px;
  }
}

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