图像的无限横向滚动动画

Question

我正在尝试来回动画（或无限向右滚动）一堆图像，但我面临一个问题，当动画开始（以及当它反转时）时，图像隐藏在视图之外。

那是因为我正在使用translate(-100%).

如果可能的话，我希望不依赖于了解图像大小或限制视口大小来完成这项工作。

（忽略动画的速度，稍后我将设置更长的持续时间）

 .slideshow {
  height: 150px;
  /*max-width: 800px;*/ /*The width of the page cannot be a problem*/
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.slideshow > div {
  height: 150px;
  width: 2000px; /*I don't want to have to input a width.*/
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transform: translate3d(0, 0, 0);
}

.move > img {
  height: 150px;
}

.slideshow .move {
animation: moveSlideshow 10s linear infinite alternate-reverse;
}

.slideshow .move:hover {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}

@keyframes moveSlideshow {
  0% {
transform: translateX(0%); 
  }
  100% { 
transform: translateX(-100%);  /*The width of the page needs to be taken into consideration*/
  }
}

<div class="slideshow">
  <div class="move">
 <img src="https://via.placeholder.com/300x150">
 <img src="https://via.placeholder.com/300x150">
 <img src="https://via.placeholder.com/300x150">
 <img src="https://via.placeholder.com/300x150">
 <img src="https://via.placeholder.com/300x150">
 <img src="https://via.placeholder.com/300x150">
  </div>
</div>

我也尝试使用：transform: translateX(100%) translateX(-50px);，但它不起作用。

我的第一个目标是制作一个无限滚动条，当动画到达结尾时，它应该再次开始，但不会被注意到（平滑重启，结束图像需要跟随开始图像）。

如果我无法做到这一点，我想要一个来回动画，但从最后一个图像接触视口的右边缘开始。（使用上面的代码，动画从左侧的图像开始）

我该如何修复这个动画？（启用无限平滑滚动或不从视图中消失）

编辑：

通过使用这些关键帧，我设法让它与动画一起来回工作：

@keyframes moveSlideshow {
  0% {
    transform: translateX(0%); 
  }
  100% { 
    -ms-transform: translateX(-100%) translateX(100vw); 
    transform: translateX(calc(-100% + 100vw));  
  }
}

现在，最后一个图像从右侧开始，第一个图像从左侧结束。唯一的问题是，当视口宽度改变时，动画播放的速度也会改变。

Answer 1

为了使滚动连续且无限，您需要复制图像。

然后就很容易实现你想要的了：

注意：在初始状态下，显示第一个移动元素，左对齐。第二个移动元素位于其右侧，并且不可见，因为它位于容器之外。

我们将它们都 100% 向左移动。第一个会从左边消失，并且在某个时刻会在右边留下空白。但第二个以相同的速度移动，因此将填补第一个留下的空白。

当第二个动画移动 100% 时动画结束，因此它显示在与第一个动画相同的位置。现在动画再次开始，并显示第一个动画，但您不会注意到此更改。

.slideshow {
  height: 150px;
  margin: 0 auto;
  position: relative;
  transform: translate3d(0, 0, 0);
  display: flex;
  width: 100%;
  overflow: hidden;
  background-color: blue;
}

.move {
  height: 100%;
  transform: translate3d(0, 0, 0);
  display: flex;
  animation: moveSlideshow 10s linear infinite;
}

.move:nth-child(2) img {
  opacity: 0.4;

}
.move > img {
  height: 150px;
  width: auto;
}


.slideshow:hover .move {
  animation-play-state: paused;
}

@keyframes moveSlideshow {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
    /*The width of the page needs to be taken into consideration*/
  }
}

<div class="slideshow">
  <div class="move">
    <img src="https://via.placeholder.com/400x150">
    <img src="https://via.placeholder.com/300x150">
    <img src="https://via.placeholder.com/300x150">
    <img src="https://via.placeholder.com/300x150">
    <img src="https://via.placeholder.com/300x150">
    <img src="https://via.placeholder.com/200x150">
  </div>
  <div class="move">
    <img src="https://via.placeholder.com/400x150">
    <img src="https://via.placeholder.com/300x150">
    <img src="https://via.placeholder.com/300x150">
    <img src="https://via.placeholder.com/300x150">
    <img src="https://via.placeholder.com/300x150">
    <img src="https://via.placeholder.com/200x150">
  </div>
</div>