Infinite fade-in fade-out animation on the images

Question

I have to show the infinite fade-in fade-out animation on the images. I tried the below code but I think something is wrong with the animation-delay.

What I am doing, I have to show the first 5 images then the first 5 images will fade out and fade in the next 5 images in the same place.

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

@-o-keyframes animationName {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes animationName {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes animationName {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.elementToFadeInAndOut ul {
  display: grid;
  list-style: none;
  grid-template-columns: auto auto auto auto auto;
  grid-gap: 10px;
  padding-left: 0;
  justify-content: center;
  align-items: center;
}

.elementToFadeInAndOut ul li {
  -webkit-animation: animationName 5s infinite;
  -moz-animation: animationName 5s infinite;
  -o-animation: animationName 5s infinite;
  animation: animationName 5s infinite;
  width: 250px;
}

li:nth-child(6),
li:nth-child(7),
li:nth-child(8),
li:nth-child(9),
li:nth-child(10) {
  animation-delay: -4s !important;
}

li:nth-child(11),
li:nth-child(12),
li:nth-child(13),
li:nth-child(14),
li:nth-child(15) {
  animation-delay: -1s !important;
}

img {
  width: 100%;
}

<div class="elementToFadeInAndOut">
  <ul>
    <li><img src="//placehold.it/450x280?text=Image 1" /></li>
    <li><img src="//placehold.it/450x280?text=Image 2" /></li>
    <li><img src="//placehold.it/450x280?text=Image 3" /></li>
    <li><img src="//placehold.it/450x280?text=Image 4" /></li>
    <li><img src="//placehold.it/450x280?text=Image 5" /></li>
    <li><img src="//placehold.it/450x280?text=Image 6" /></li>
    <li><img src="//placehold.it/450x280?text=Image 7" /></li>
    <li><img src="//placehold.it/450x280?text=Image 8" /></li>
    <li><img src="//placehold.it/450x280?text=Image 9" /></li>
    <li><img src="//placehold.it/450x280?text=Image 10" /></li>
    <li><img src="//placehold.it/450x280?text=Image 11" /></li>
    <li><img src="//placehold.it/450x280?text=Image 12" /></li>
    <li><img src="//placehold.it/450x280?text=Image 13" /></li>
    <li><img src="//placehold.it/450x280?text=Image 14" /></li>
    <li><img src="//placehold.it/450x280?text=Image 15" /></li>

  </ul>
</div>

Answer 1

Add position: relative; to .elementToFadeInAndOut ul li and add position: absolute; to img and remove your grid-gap: 10px; See here:

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

@-o-keyframes animationName {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
    }

@-moz-keyframes animationName {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
    }

@-webkit-keyframes animationName {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
    }

.elementToFadeInAndOut ul {
  display: grid;
  list-style: none;
  grid-template-columns: auto auto auto auto auto;
  padding-left: 0;
  justify-content: center;
  align-items: center;
}

.elementToFadeInAndOut ul li {
  position: relative;
  -webkit-animation: animationName 6s infinite;
  -moz-animation: animationName 6s infinite;
  -o-animation: animationName 6s infinite;
  animation: animationName 6s infinite;
  width: 250px;
  opacity: 0;
}


li:nth-child(6),
li:nth-child(7),
li:nth-child(8),
li:nth-child(9),
li:nth-child(10) {
  animation-delay: -4s !important;
}

li:nth-child(11),
li:nth-child(12),
li:nth-child(13),
li:nth-child(14),
li:nth-child(15) {
  animation-delay: -2s !important;
}


img {
  width: 100%;
  position: absolute;
}

<div class="elementToFadeInAndOut">
  <ul>
    <li><img src="//placehold.it/450x280?text=Image 1" /></li>
    <li><img src="//placehold.it/450x280?text=Image 2" /></li>
    <li><img src="//placehold.it/450x280?text=Image 3" /></li>
    <li><img src="//placehold.it/450x280?text=Image 4" /></li>
    <li><img src="//placehold.it/450x280?text=Image 5" /></li>
    <li><img src="//placehold.it/450x280?text=Image 6" /></li>
    <li><img src="//placehold.it/450x280?text=Image 7" /></li>
    <li><img src="//placehold.it/450x280?text=Image 8" /></li>
    <li><img src="//placehold.it/450x280?text=Image 9" /></li>
    <li><img src="//placehold.it/450x280?text=Image 10" /></li>
    <li><img src="//placehold.it/450x280?text=Image 11" /></li>
    <li><img src="//placehold.it/450x280?text=Image 12" /></li>
    <li><img src="//placehold.it/450x280?text=Image 13" /></li>
    <li><img src="//placehold.it/450x280?text=Image 14" /></li>
    <li><img src="//placehold.it/450x280?text=Image 15" /></li>

  </ul>
</div>