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

你可以做一个简单的黑客，使第四张图片与第一张图片相同。你也可以做类似于什么 Adri1 但在这种情况下，你会看到向后移动到图像1。

这是我的解决方案，图像1作为第四张图像重复。记住你需要增加 .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>

Answer 2

这不是最好的解决方案，你必须调整你的时序，但增加第四个关键帧来回滚到第一个图像似乎是有效的。

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