Question

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

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

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

我还发现了 this answer ，在这个问题上，最后一个解决方案太接近于回答这个问题了，但问题是它何时启动，它来自右边即{{1}我不想要的。我希望我的图片从transform:translateX(100%)开始。

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

Stack Snippet

transform:translateX(0)

.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%);
  }
}

Answer 1

你可以使用一个小的黑客效果，假设你的最后一个项目与你的第一个项目相同，你可以做一个非常快速的过渡，用户不会注意到......就像这样..

.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 2

一个想法是移动第一个图像，使其在最后创建复制效果，此图像的移动将在后面进行，所以没有人会看到它然后你可以调整，使第一张幻灯片少花时间：

＆＃13;

.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% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  15%,
  45% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  50%,
  80% {
    -webkit-transform: translateX(-200%);
    transform: translateX(-200%);
  }
  85%,
  100% {
    -webkit-transform: translateX(-300%);
    transform: translateX(-300%);
  }
}

＆＃13;

<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>

＆＃13;

Answer 3

DaniP的回答出了什么问题？

＆＃13;

.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%);
  }
}

＆＃13;

<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>

＆＃13;

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

3 个答案: