title: infinite loop slider using keyframes css3
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>So is there any way to resolve this issue?</p>
  
  <p>Also I found <strong><a href="https://stackoverflow.com/questions/40241744/continues-slider-using-css3-animation-keyframes#40241936">this answer</a></strong>, 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 <code>transform:translateX(100%)</code> which I don't want. I want my image to start from the <code>transform:translateX(0)</code>.  </p>
  
  <p>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 </p>
  
  <p><strong><em>Stack Snippet</em></strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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%);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="inner"&gt;
    &lt;div class="images-wrapper"&gt;
      &lt;img src="http://via.placeholder.com/200x200/ff0000" alt=""&gt;
      &lt;img src="http://via.placeholder.com/200x200/00ff00" alt=""&gt;
      &lt;img src="http://via.placeholder.com/200x200/0000ff" alt=""&gt;
      &lt;img src="http://via.placeholder.com/200x200/ff0000" alt=""&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>