在css中使用动画自动滚动答案

【问题标题】：automatic scrolling using animation in css在css中使用动画自动滚动
【发布时间】：2021-08-25 17:14:34
【问题描述】：

我是动画新手。我想实现图像的从下到上的自动滚动。这里我写了一些代码。

index.html：

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

.photobanner {
  display: flex;
  flex-direction: column;
  top: 0px;
  overflow: hidden;
  white-space: nowrap;
  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%);
  }
}

 <div id="container">
                <div class="photobanner">
                  <img
                    src="https://i.stack.imgur.com/xckZy.jpg"
                    alt=""
                    style="height: 285px; width: 100%"
                  />
                  <p>image1</p>
                  <img
                    src="https://i.stack.imgur.com/RTiml.jpg"
                    alt=""
                    style="height: 285px; width: 100%"
                  />
                  <p>Image2</p>
                  <img
                  src="https://i.stack.imgur.com/RTiml.jpg"
                    alt=""
                    style="height: 285px; width: 100%"
                  />
                  <p>Image3</p>
                  <img
                   src="https://i.stack.imgur.com/RTiml.jpg"
                    alt=""
                    style="height: 285px; width: 100%"
                  />
                  <p>Image4</p>
                </div>
              </div>

上面的代码会自动滚动。但它只显示前 3 张图像。如果我更新

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

它显示所有图像，但在显示所有图像后它会创建一些空白空间。我不明白如何解决这个问题..请帮助我。提前致谢

【问题讨论】：

标签： html css animation

【解决方案1】：

您可以开始让横幅的子元素与容器的高度相同。

因此，您将照片横幅翻译了 -50%。您需要通过照片横幅的全高减去容器的高度来翻译它。现在复制最后一个子元素，这将使动画重置，而您不会注意到。

【讨论】：