CSS / HTML - проблема с бесконечной прокруткой слайдера

Question

Я создаю слайдер, цель которого состоит в том, чтобы три разных объявления скользили слева направо в бесконечном цикле.

Я создал слайдер следующим образом:

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

Рабочий JSBin

Проблема:

Я не могу получить первый слайд, чтобы "сбросить", поэтому яполучите небольшое мерцание в конце анимации, где оно сбрасывается. Я пробовал разные методы, но безрезультатно. Оптимально, я мог бы добавить «невидимый» ключевой кадр для сброса позиции. Есть идеи, как это может работать?

Answer 1

Вам нужно добавить animation-direction и animation-play-state в css. Обновите css для #slider, например:

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