时间戳

首页 > 解决方案 > 图像的无限横向滚动动画

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

问题描述

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

那是因为我正在使用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));  
  }
}

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

标签： htmlcssanimationcss-animations

解决方案

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

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

注意：在初始状态下，显示第一个移动元素，左对齐。第二个移动元素在它的右边，因为它不在容器中，所以不可见。

我们将它们都向左移动 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>

推荐阅读