使用CSS动画实现图片自下而上自动滚动出现空白区域问题求助

你设置transform: translate(0, -100%)时，这个百分比是相对于.photobanner自身的总高度计算的，动画运行到终点时，整个.photobanner已经完全移出了父容器#container的可视区域，所以会出现空白。
而原来的-50%设置滚动距离不足，所以无法展示完全部图片。

要实现无空白的无限循环滚动，只要把滚动内容复制一份拼接在原有内容末尾，再把动画终点改回-50%即可：

• 原理：复制后.photobanner的总高度是原来的2倍，动画向上移动50%自身高度时，刚好把前半段原有内容完全移出视口，后半段复制的内容刚好承接上，动画循环时不会出现衔接断层，也不会有空白。

调整后代码 #

CSS #

#container {
  height: 350px;
  position: relative;
  overflow: hidden;
  margin-top: 25px;
}

.photobanner {
  display: flex;
  flex-direction: column;
  animation: bannermove 10s linear infinite;
}
.photobanner:hover {
  animation-play-state: paused;
}

.photobanner img {
  margin: 0 0.5em;
}

@keyframes bannermove {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -50%);
  }
}

提示：如果觉得滚动速度不符合预期，可调整animation: bannermove 10s linear infinite中的10s参数，数值越大滚动速度越慢。

HTML #

<div id="container">
  <div class="photobanner">
    <!-- 原有内容 -->
    <img
      src="https://i.sstatic.net/xckZy.jpg"
      alt=""
      style="height: 285px; width: 100%"
    />
    <p>image1</p>
    <img
      src="https://i.sstatic.net/RTiml.jpg"
      alt=""
      style="height: 285px; width: 100%"
    />
    <p>Image2</p>
    <img
      src="https://i.sstatic.net/RTiml.jpg"
      alt=""
      style="height: 285px; width: 100%"
    />
    <p>Image3</p>
    <img
      src="https://i.sstatic.net/RTiml.jpg"
      alt=""
      style="height: 285px; width: 100%"
    />
    <p>Image4</p>
    <!-- 复制一份原有内容拼接在后面 -->
    <img
      src="https://i.sstatic.net/xckZy.jpg"
      alt=""
      style="height: 285px; width: 100%"
    />
    <p>image1</p>
    <img
      src="https://i.sstatic.net/RTiml.jpg"
      alt=""
      style="height: 285px; width: 100%"
    />
    <p>Image2</p>
    <img
      src="https://i.sstatic.net/RTiml.jpg"
      alt=""
      style="height: 285px; width: 100%"
    />
    <p>Image3</p>
    <img
      src="https://i.sstatic.net/RTiml.jpg"
      alt=""
      style="height: 285px; width: 100%"
    />
    <p>Image4</p>
  </div>
</div>

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