CSS 重新启动时自动水平图像幻灯片无缝过渡

Question

我有一个 HTML 和 CSS（只有！）自动水平幻灯片。工作正常，除了最后一张图片完成滑动并且幻灯片放映从第一张图片再次开始后，第一张图片突然跳入视图。我怎样才能让它看起来更无缝？如果不使用 javascript 这可能吗？

.slider-container {
    width: 100%;
    height: 446px;
    position: relative;
    text-align: center;
    overflow: hidden;
}

.image-container {
  width: 3240px;
  height: 446px;
  clear: both;
  position: relative;
  animation-name: slider;
  animation-duration: 30s;
  animation-delay: 10s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: backwards;
  animation-play-state: running;
}

.slider-image {
  width: auto;
  height: 446px;
  float: left;
  position: relative;
}

@keyframes slider {
  0% {
    transform: translate(0, 0);
  }
  50% {
      transform: translate(-1080px, 0);
  }
  100% {
      transform: translate(-2160px, 0);
  }
}

<section class="row top slider-container">
 <div class="image-container">
  <img class="slider-image" src="https://dummyimage.com/1080x446/000/fff.png&text=Image+1" alt="">
  <img class="slider-image" src="https://dummyimage.com/1080x446/333333/fff.png&text=Image+2" alt="">
  <img class="slider-image" src="https://dummyimage.com/1080x446/666666/fff.png&text=Image+3" alt="">
 </div>
</section>

Answer 1

这不是最佳解决方案，您必须调整时间，但添加第四个关键帧以滚动回第一张图片似乎可行。

@keyframes slider {
  0% {
    transform: translate(0, 0);
  }
  33% {
      transform: translate(-1080px, 0);
  }
  66% {
      transform: translate(-2160px, 0);
  }
  100% {
      transform: translate(0, 0);
  }
}

Answer 2

您可以做一个简单的修改，使第四张图片与第一张图片相同。您也可以执行与 Adri1 提到的类似的操作，但在那种情况下您会看到向后移动到 image1.

这是我的解决方案，其中将图像 1 重复为第 4 个图像。请记住，您需要将 .image-container 的宽度增加 1080 px，并添加另一个关键帧（总共 4 个关键帧）。

.slider-container {
    width: 100%;
    height: 446px;
    position: relative;
    text-align: center;
    overflow: hidden;
}

.image-container {
  width: 4320px;
  height: 446px;
  clear: both;
  position: relative;
  animation-name: slider;
  animation-duration: 30s;
  animation-delay: 10s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: backwards;
  animation-play-state: running;
}

.slider-image {
  width: auto;
  height: 446px;
  float: left;
  position: relative;
}

@keyframes slider {
  0% {
    transform: translate(0, 0);
  }
  33% {
      transform: translate(-1080px, 0);
  }
  66% {
      transform: translate(-2160px, 0);
  }
  100% {
      transform: translate(-3240px, 0);
  } 
}

<section class="slider-container">
 <div class="image-container">
  <img class="slider-image" src="https://dummyimage.com/1080x446/000/fff.png&text=Image+1" alt="">
  <img class="slider-image" src="https://dummyimage.com/1080x446/333333/fff.png&text=Image+2" alt="">
  <img class="slider-image" src="https://dummyimage.com/1080x446/666666/fff.png&text=Image+3" alt="">
   <img class="slider-image" src="https://dummyimage.com/1080x446/000/fff.png&text=Image+1" alt="">
 </div>
</section>

CSS 重新启动时自动水平图像幻灯片无缝过渡

CSS automatic horizontal image slideshow seamless transition on restart

html

css

slideshow