Sun. Jun 4th, 2023

[ANSWERED] html – Infinite fade-in fade-out animation on the images

By

Nov 18, 2022 animation, css, html, keyframe

Solution 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>

Problem :

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>

Comments

Comment posted by user9437856

Thanks for the reply, I checked your snippet, I think, Something is wrong. I mean once displayed the 3rd set of images (11-15) then next I am not getting the 1st set(1-5). It’s directly displaying 2nd set of image(6-10)

Comment posted by John

@user9437856 Ok I got it. I updated my answer, Please take a look.

Comment posted by John

Or sorry, ignore that. That was left over code from me tinkering with it. I’ll fix it in the answer.

Comment posted by user9437856

Yes, it’s working perfectly now. Thanks for the help.

By

Related Post

[ANSWERED] html – How to include a clickable image behind a link

Nov 20, 2022

[ANSWERED] html – Move list item to the left in header/navigation menu

Nov 20, 2022

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022