图像的无限横向滚动动画

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

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

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

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

我们将将它们都 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>