javascript - CSS/HTML - 无限滚动 slider 问题

Question

我正在创建一个 slider ，其目标是让三个不同的广告在无限循环中从左向右滑动。

我是这样创建 slider 的:

  <div class="container">
    <div id="slider">
      <div class="box">
        <div class="one"></div>
      </div>
      <div class="box">
        <div class="two"></div>
      </div>
      <div class="box">
        <div class="three"></div>
      </div>
    </div>
  </div>

这里的CSS:

.container {
  width: 500px; 
  max-width: 500px; 
  height: 200px; 
  overflow: hidden;
}

#slider {
  width: 300%; 
  position: relative; 
  overflow: hidden;
  animation: 6s slide infinite; 
}

@keyframes slide {
  0% {margin-left: 0}
  16.67% {margin-left: 0}
  33.33% {margin-left: -100%}
  50% {margin-left: -100%}
  66% {margin-left: -100%}
  75% {margin-left: -200%}
  100% {margin-left: -200%}
}

.box {
  width: 33.33%;
  height: 100%; 
  float: left;
}

.box div {
  margin: 0 auto;
  width: 50%;
  height: 50px; 
}

.one {
  background: green; 
}

.two {
  background: red; 
}

.three {
  background: blue; 
}

Working JSBin

问题:

我无法让第一张幻灯片“重置”，所以我在动画结束时重置时出现小闪烁。我尝试了不同的方法，但无济于事。最理想的是，我可以添加一个“隐形”关键帧来重置位置。任何想法这是如何工作的？

Answer 1

你需要在css中添加animation-direction和animation-play-state。 更新 #slider 的 CSS，例如:

#slider {
  width: 300%; 
  position: relative; 
  overflow: hidden;
  animation-name: slide;
  animation-duration: 6s;
  animation-iteration-count:infinite;
  animation-direction:alternate;
  animation-play-state:running;
}

结果 https://jsfiddle.net/Coderius/sqga89eo/

或者如果需要将最后一张幻灯片返回到第一张幻灯片，请更改:

#slider {
    width: 300%; 
    position: relative; 
    overflow: hidden;
    animation-name: slide;
    animation-duration: 6s;
    animation-iteration-count:infinite;
    /* animation-direction:alternate; */
    /* animation-play-state:running; */

}

@keyframes slide {
  0% {margin-left: 0}
  16.67% {margin-left: 0}
  33.33% {margin-left: -100%}
  50% {margin-left: -100%}
  66% {margin-left: -100%}
  75% {margin-left: -200%}
  80% {margin-left: -200%}
  85% {margin-left: -200%}
  100% {margin-left: 0%}
}

结果 - https://jsfiddle.net/Coderius/j2b3vm65/