CSS3 Animation - Smooth Infinite Animation

Question

I've made a small Image animation where images changes opacity over time.It works smoothly but when last image gets to 100% it jumps straight to 0% without any transition.

I have already tried animation-direction: alternate for third image and delay for all image but it does not work for me. Delay works only first step of animation cycle after it delay becomes 0 for all.

Here is my CSS

.rightside .img-container img.first {
  animation-name: first-image;
  animation-duration: 9s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  /* animation-delay: -10s; */
}

.rightside .img-container img.second {
  position: absolute;
  top: 0;
  animation-name: second-image;
  animation-duration: 9s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

.rightside .img-container img.third {
  position: absolute;
  top: 0;
  animation-name: final-image;
  animation-duration: 9s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  /* animation-direction: alternate; */
}

@keyframes first-image {
  0% {
    opacity: 0;
  }
  33.3% {
    opacity: 1;
  }
  67% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes second-image {
  0% {
    opacity: 0;
  }
  33.3% {
    opacity: 0;
  }
  67% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes final-image {
  0% {
    opacity: 0;
  }
  33.3% {
    opacity: 0;
  }
  67% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

HTML

        <div class="img-container">
          <img src="Images/Apple.png" class="first turn" alt="Image Here" />
          <img src="Images/Bee.png" class="second" alt="Image Here" />
          <img src="Images/Cat.png" class="third" alt="Image Here" />
        </div>

Answer 1

The clasical aproach to this would be just using different delays:

 div { animation-name: all; animation-duration: 9s; animation-iteration-count: infinite; width: 100px; height: 100px; background-color: yellow; } .first { animation-delay: -3s; background-color: lightgreen; } .third { animation-delay: -6s; background-color: lightblue; } @keyframes all { 0% { opacity: 0; } 33.3% { opacity: 1; } 67% { opacity: 0; } 100% { opacity: 0; } } 

 <div class="first"></div> <div class="second"></div> <div class="third"></div>