title: css keyframe animation image loop
body: <p>I'm creating a css keyframe animation in which an image will slide-in, park for a minute, then slide-out as the next image slides in, and this will run in an 'infinite' loop (as long as there's an 'animate' class on the parent element, which is toggled via js on scroll).</p>
  
  <p>What I have so far (<a href="https://jsfiddle.net/WhiskeyT/Lurkf4f6/" rel="nofollow noreferrer">https://jsfiddle.net/WhiskeyT/Lurkf4f6/</a>) is presenting two problems:</p>
  
  <p>First, the timings required seemed straightforward - total animation duration of 3 seconds, image 1, 2, &amp; 3 animation-durations set to 0, 3s, 6s - but there appears to be a slight delay or gap between the exiting image and the entering image, and I'd like very much to tighten it up. Despite hours of tweaking I can't seem to tweak the keyframes into something closer to my objective.</p>
  
  <p>Second issue is more substantial and obvious: the 3 images animate, and as the animation loops only the 3rd image is repeatedly loading.</p>
  
  <p>Any help is greatly appreciated.</p>
  
  <p>Whiskey T.</p>
  
  <pre><code>&lt;div class="slide" id="slide-02"&gt;
      &lt;div class="image-rotator"&gt;
          &lt;img src="img1.jpg" alt="img" /&gt;
          &lt;img src="img2.jpg" alt="img" /&gt;
          &lt;img src="img3.jpg" alt="img" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;&lt;!-- #slide-02 --&gt;
  
  
  .slide {
      width: 100%;
      height: 100vh;
      position: relative;
  }
  
  
  #slide-02 .image-rotator {
      position: relative;
      width: 50%;
      max-width: 450px;
      height: 100%;
      overflow: hidden;
  }
  
  #slide-02.animate .image-rotator img {
      position: absolute;
      top: 0;
      left: -450px; // I remain confused as to how init rule collides w/0% keyframe ;(
      width: 100%;
      height: 100%;
  }
  
  #slide-02.animate .image-rotator img:nth-child(1) { animation: imgRotator 3s ease-in-out infinite 0s; }
  #slide-02.animate .image-rotator img:nth-child(2) { animation: imgRotator 3s ease-in-out infinite 3s; }
  #slide-02.animate .image-rotator img:nth-child(3) { animation: imgRotator 3s ease-in-out infinite 6s; }
  
  @keyframes imgRotator {
      0% {
          opacity: 0;
          left: 450px;
      }
      15%, 84% {
          opacity: 1;
          left: 0;
      }
      100% {
          opacity: 0;
          left: -450px;
      }
  }
  </code></pre>