如何实现无空白的高速连续图片滑动动画？

一、解决当前img动画的空白问题 #

你当前的动画逻辑是让单张图片从translateY(100%)滑到translateY(-100%)，动画结束后会瞬间跳回起点，因此出现空白。要实现无缝连续滑动，核心是让两张相同图片首尾衔接，通过滑动图片组实现循环：

修改后的HTML结构

<div class="image_wrap">
  <div class="image_slider">
    <img src="你的图片地址" alt="滑动图片">
    <img src="你的图片地址" alt="滑动图片">
  </div>
</div>

对应CSS样式

.image_wrap {
  width: 580px;
  height: 260px;
  overflow: hidden;
}
.image_slider {
  display: flex;
  flex-direction: column;
  height: 200%; /* 两张图片总高度为容器的2倍 */
  animation: slideImg 2s linear infinite;
}
.image_slider img {
  width: 100%;
  height: 50%; /* 每张图片占容器高度的一半 */
  object-fit: cover; /* 保持图片比例，避免拉伸变形 */
  transform: scale(1.2);
}

@keyframes slideImg {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

原理：纵向排列两张相同图片，动画让整个图片组向上滑动100%（刚好滑过一张图片的高度），当第一张完全滑出容器时，第二张刚好顶入视野，实现无空白的循环滑动。动画时长可根据需求调整，这里设为2s是为了保持和原动画一致的滑动速度。

二、使用background-img实现动画的可行性 #

完全可行，这种方式不需要额外的图片DOM元素，结构更简洁：

HTML结构

<div class="image_wrap"></div>

对应CSS样式

.image_wrap {
  width: 580px;
  height: 260px;
  overflow: hidden;
  background-image: url("你的图片地址");
  background-size: cover;
  background-position: center;
  background-repeat: repeat-y; /* 让背景图纵向重复 */
  animation: slideBg 2s linear infinite;
}

@keyframes slideBg {
  0% { background-position: 0 0; }
  100% { background-position: 0 -100%; }
}

原理：利用background-repeat: repeat-y让背景图纵向重复排列，通过background-position的Y轴偏移实现滑动，当偏移量达到-100%时，刚好和初始位置的背景图衔接，自然完成循环，同样能实现无空白的滑动效果。

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