html - 使用关键帧 css3 的无限循环 slider

Question

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

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

那么有什么办法可以解决这个问题吗？

我还发现 this answer ，在这个最后的解决方案太接近回答这个问题，但问题是当它开始时，它来自右边，即 transform:translateX(100%) 我不知道不想。我希望我的图像从 transform:translateX(0) 开始。

除了重复第一张图片，有什么方法可以制作 slider ，这看起来像使用具有相同滑动时间的 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>