html - 图像的无限横向滚动动画

Question

我正在尝试来回动画(或无限滚动到右侧)一堆图像，但我面临一个问题，即当动画开始时(以及反转时)图像隐藏在 View 之外。

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

如果可能的话，我不想依赖知道图像大小或限制视口(viewport)大小来完成这项工作。

(忽略动画的速度，我稍后会设置更长的持续时间)

 .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); ，但它不起作用。

我的第一个目标是制作一个无限滚动，当动画结束时，它应该重新开始，但不会引起注意(平滑重启，结束图像需要跟随开始图像)。

如果我无法做到这一点，我希望有一个来回动画，但从触摸视口(viewport)右边缘的最后一张图像开始。
(使用上面的代码，动画从左边的图像开始)

我该如何修复这个动画？
(启用无限平滑滚动或不从 View 中消失)

编辑:

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

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

现在，最后一张图片从右侧开始，第一张图片从左侧结束。
唯一的问题是动画播放的速度会随着视口(viewport)宽度的变化而变化。

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>