css keyframe animation image loop

Question

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

What I have so far (https://jsfiddle.net/WhiskeyT/Lurkf4f6/) is presenting two problems:

First, the timings required seemed straightforward - total animation duration of 3 seconds, image 1, 2, & 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.

Second issue is more substantial and obvious: the 3 images animate, and as the animation loops only the 3rd image is repeatedly loading.

Any help is greatly appreciated.

Whiskey T.

<div class="slide" id="slide-02">
    <div class="image-rotator">
        <img src="img1.jpg" alt="img" />
        <img src="img2.jpg" alt="img" />
        <img src="img3.jpg" alt="img" />
    </div>
</div><!-- #slide-02 -->


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

Temani Afif Temani Afif · Accepted Answer · 2018-05-27T22:22:28

The issue is that after the delays all the animations will be the same because the delays are multiplier of the duration so only the third one will remain visible since all of them are animating at the same states and above each other.

You may decrease the opacity and you will clearly see what is happening:

.slide {
   width: 100%;
   height: 80vh;
   position: relative;
}

#slide-02 .image-rotator {
   position: relative;
   max-width: 300px;
   height: 100%;
   overflow: hidden;
   border: 1px solid lime;
}

#slide-02.animate .image-rotator img {
   position: absolute;
   top: 0;
   left: -450px;
   width: 100%;
   height: 100%;
   overflow: hidden;
   border-radius: 3px;
}

#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:0.8;
      left: 0;
   }
   100% {
      opacity: 0;
      left: -450px;
   }
}

<div class="slide animate" id="slide-02">
   <div class="image-rotator">
      <img src="https://s22.postimg.cc/7hgn7691t/pexels-photo-39803.jpg" alt="apple" />
      <img src="https://s22.postimg.cc/d5mxy25oh/bananas-fruit-carbohydrates-sweet-38283.jpg" alt="bananas" />
      <img src="https://s22.postimg.cc/hrj26ejht/pexels-photo-109274.jpg" alt="cherries" />
   </div>
</div>
<!-- #slide-02 -->

To fix this, you may adjust the animation and the delays like this:

.slide {
   width: 100%;
   height: 80vh;
   position: relative;
}

#slide-02 .image-rotator {
   position: relative;
   max-width: 300px;
   height: 100%;
   overflow: hidden;
   border: 1px solid lime;
}

#slide-02.animate .image-rotator img {
   position: absolute;
   top: 0;
   left: -450px;
   width: 100%;
   height: 100%;
   overflow: hidden;
   border-radius: 3px;
}

#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 1s;
}

#slide-02.animate .image-rotator img:nth-child(3) {
   animation: imgRotator 3s ease-in-out infinite 2s;
}

@keyframes imgRotator {
   0% {
      opacity: 0;
      left: 450px;
   }
   50%{
      opacity: 1;
      left: 0;
   }
}

<div class="slide animate" id="slide-02">
   <div class="image-rotator">
      <img src="https://s22.postimg.cc/7hgn7691t/pexels-photo-39803.jpg" alt="apple" >
      <img src="https://s22.postimg.cc/d5mxy25oh/bananas-fruit-carbohydrates-sweet-38283.jpg" alt="bananas" >
      <img src="https://s22.postimg.cc/hrj26ejht/pexels-photo-109274.jpg" alt="cherries" >
   </div>
</div>

css keyframe animation image loop

2 Answers