Infinite Loop Slider Using Keyframes Css3

I was making a slider using css3 keyframes. I don't want my last slide directly jump to first slide. I found some questions related to it and found that duplicating the first image

Solution 1:

An idea is to also move the first image to make it at the end to create the duplicate effect. This will be done behind so no one will see it then you can adjust to make the first slide take less time:

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

<divclass="inner"><divclass="images-wrapper"><imgsrc="http://via.placeholder.com/200x200/ff0000"alt=""><imgsrc="http://via.placeholder.com/200x200/00ff00"alt=""><imgsrc="http://via.placeholder.com/200x200/0000ff"alt=""></div></div>

Solution 2:

You can use a small hack effect, let say your last item is the same as your first you could make a really fast transition the will not be noted by the user... like this..

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

<divclass="inner"><divclass="images-wrapper"><imgsrc="http://via.placeholder.com/200x200/ff0000"alt=""><imgsrc="http://via.placeholder.com/200x200/00ff00"alt=""><imgsrc="http://via.placeholder.com/200x200/0000ff"alt=""><imgsrc="http://via.placeholder.com/200x200/ff0000"alt=""></div></div>

Solution 3:

What was wrong with DaniP's answer?

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

<divclass="inner"><divclass="images-wrapper"><imgsrc="http://via.placeholder.com/200x200/ff0000"alt=""><imgsrc="http://via.placeholder.com/200x200/00ff00"alt=""><imgsrc="http://via.placeholder.com/200x200/0000ff"alt=""><imgsrc="http://via.placeholder.com/200x200/ff0000"alt=""></div></div>