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

Question

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

第一次效果很好，但是第二次第一张幻灯片比正常时间要花两倍的时间，这很明显，因为最后一张幻灯片和第一张幻灯片是一样的。

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

我还发现 this answer，在这最后一个解决方案太接近了，无法回答这个问题，但问题是当它开始时，它来自右边，即我不知道的 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>

Answer 2

您可以使用一个小的 hack 效果，假设您的最后一个项目与您的第一个项目相同，您可以进行非常快速的转换，用户不会注意到......就像这样......

.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%,
  30% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  33%,
  63% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  66%,
  96% {
    -webkit-transform: translateX(-200%);
    transform: translateX(-200%);
  }
  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 3

DaniP 的回答有什么问题？

.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 4s ease infinite;
  animation: slideToLeft 4s ease infinite;
  animation-delay: 1s;
}

@keyframes slideToLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  17%,
  33% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  50%,
  66% {
    -webkit-transform: translateX(-200%);
    transform: translateX(-200%);
  }
  83%,
  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>