animation-iteration-count looping infinitely

[EDIT: Added Js below]

I have a loop of 4 images, I want the images to fade in and fade out over their duration and then stop on the last image. When I change the "animation-iteration-count" to equal 1, there still is another loop after the first iteration. The second loop seems to be much more choppy, I think it it because of the time from the animation-duration that is left over.

I understand as of now the last image will still fade out where I need it to just pause on the last image, that was the next problem to tackle after I got a smooth single loop of the images.

From what I read, animation-iteration-count's default value is 1, but I'm unsure as to why the images continue to loop.

Here is my code below:

CSS:

@keyframes cf4FadeInOut {
  0% {
    opacity:1;
  }
  17% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
} 

#cf {
  height: 100vh;
  width: 100vw;
}

#cf img {
    position:absolute;

    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-top: auto;

    left: 0;
    right: 0;
    bottom: 0;
    top: 0;

    max-height: 85vh;
    max-width: 75vw;

    -webkit-filter: grayscale(80%);
    filter: grayscale(80%);

    animation-name: cf4FadeInOut;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-duration: 30s;
    opacity: 0;
}


#cf img:nth-of-type(1) {
  animation-delay: 15s;
}
#cf img:nth-of-type(2) {
  animation-delay: 10s;
}
#cf img:nth-of-type(3) {
  animation-delay: 5s;
} 
#cf img:nth-of-type(4) {
  animation-delay: 0s;
} 

Javascript:

function App() {  
  return (
    <div id="container" style={{overflow:'hidden'}}>
        <div id="cf">
            <img src={image1}/>
            <img src={image2}/>
            <img src={image3}/>
            <img src={image4}/>
          </div>
        </div>
    </div>
  );
}

If I lower the animation-duration I don't get as smooth of a transition between the images and it seems to jump from one image to another. I think I must be missing something with the timing between images, is there some sort of formula that I should know of?