infinite loop slider using keyframes css3

Question

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 trick will work.

It works fine first time, but second time the first slide take double time compare to normal time which is obvious because last slide and first slide are same.

So is there any way to resolve this issue?

Also I found this answer, in this the last solution is too close to answer this question, but the problem is when it starts, its coming from the right i.e transform:translateX(100%) which I don't want. I want my image to start from the transform:translateX(0).

So is there any way to make a slider, except repeating the first image, which looks like infinite loop using css3 keyframes having same sliding time

Stack Snippet

.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

An idea is to move also the first image to make it at the end to create the duplicate effect and the move of this image will be made 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% {
    -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%);
  }
}

<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

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

<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

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

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