使用关键帧 css3 的无限循环滑块

Question

我正在使用 css3 关键帧制作滑块。我不希望我的最后一张幻灯片直接跳到第一张幻灯片。我发现了一些与之相关的问题，并发现复制第一个图像技巧会起作用。

第一次工作正常，但第二次第一张幻灯片与正常时间相比需要两倍的时间，这很明显，因为最后一张幻灯片和第一张幻灯片是相同的。

那么有没有办法解决这个问题呢？

我也找到了这个答案，在这最后一个解决方案太接近了，无法回答这个问题，但问题是当它开始时，它来自transform:translateX(100%)我不想要的正确即。我希望我的图像从transform:translateX(0).

那么有没有办法制作滑块，除了重复第一张图像，它看起来像使用具有相同滑动时间的 css3 关键帧的无限循环

堆栈片段

.inner {
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.images-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-animation: slideToLeft 10s ease infinite;
  animation: slideToLeft 10s ease infinite;
}

@keyframes slideToLeft {
  0%,
  20% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  25%,
  45% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  50%,
  70% {
    -webkit-transform: translateX(-200%);
    transform: translateX(-200%);
  }
  75%,
  100% {
    -webkit-transform: translateX(-300%);
    transform: translateX(-300%);
  }
}

<div class="inner">
  <div class="images-wrapper">
    <img src="http://via.placeholder.com/200x200/ff0000" alt="">
    <img src="http://via.placeholder.com/200x200/00ff00" alt="">
    <img src="http://via.placeholder.com/200x200/0000ff" alt="">
    <img src="http://via.placeholder.com/200x200/ff0000" alt="">
  </div>
</div>

Answer 1

一个想法是也移动第一张图像以使其位于末尾以创建重复效果。这将在后面完成，这样就没有人会看到它，然后您可以调整以使第一张幻灯片花费更少的时间：

.inner {
  width: 200px;
  height: 200px;
  overflow: hidden;
  position:relative;
}

.images-wrapper {
  display: flex;
  align-items: center;
  animation: slideToLeft 10s ease infinite 1s;
}
img:first-child {
  z-index:-1;
  animation: image-change 10s ease infinite 1s;
}

@keyframes image-change {
 0%,50% {
    transform: translateX(0%);
  }
  70%,100% {
    transform: translateX(300%);
  }
}

@keyframes slideToLeft {
  0%,
  10% {
    transform: translateX(0);
  }
  15%,
  45% {
    transform: translateX(-100%);
  }
  50%,
  80% {
    transform: translateX(-200%);
  }
  85%,
  100% {
    transform: translateX(-300%);
  }
}

<div class="inner">
  <div class="images-wrapper">
    <img src="http://via.placeholder.com/200x200/ff0000" alt="">
    <img src="http://via.placeholder.com/200x200/00ff00" alt="">
    <img src="http://via.placeholder.com/200x200/0000ff" alt="">
  </div>
</div>