Crossfade two images with CSS and stop at the end

Issue

I want to crossfade from one image to another and stop at the end.

Currently my code looks like below. Unfortunately the target image f2 doesn't stay and reverts to a white background.

.fadein {
    position:absolute;
    top:0px;
}
.fadein img {
    opacity: 0;
    position:absolute;
    animation-name: fade;
    animation-iteration-count: 1;
    animation-duration: 4s;
    animation-fill-mode: forwards;
}

@keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}

#f2 {
    animation-delay: 2s;
}

<div class="fadein">
    <img id="f1" src="https://dummyimage.com/320x180/fff/aaa">
    <img id="f2" src="https://loremflickr.com/320/180">
</div>

Solution

Right now it's starting at opacity: 0 and ending at opacity: 0. You need to change so that when the animation ends the opacity:1 is set to one.

.fadein {
  position: absolute;
  top: 0px;
}

.fadein img {
  opacity: 0;
  position: absolute;
  animation-name: fade;
  animation-iteration-count: 1;
  animation-duration: 4s;
  animation-fill-mode: forwards;
}

#f1 {
  animation-name: fadeout;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeout {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5
  }
  100% {
    opacity: 0;
  }
}

#f2 {
  animation-delay: 2s;
}

<div class="fadein">
  <img id="f1" src="https://dummyimage.com/320x180/fff/aaa">
  <img id="f2" src="https://loremflickr.com/320/180">
</div>

Answered By - Jacob