Make icons appear gradually

Question

I have an icon container, and I would like to make an animation that gradually delays the appearance of icons one at a time. Below is a small example of more or less how the box is

.container{
  display:flex;
  gap: 8px;
  flex-flow: row wrap;
}
.container > img{
  width: auto;
  height: auto;
  max-width: 40px;
  max-height: 40px
}

<div class="container">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/1024px-Google_Chrome_icon_%28February_2022%29.svg.png">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/1024px-Google_Chrome_icon_%28February_2022%29.svg.png">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/1024px-Google_Chrome_icon_%28February_2022%29.svg.png">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/1024px-Google_Chrome_icon_%28February_2022%29.svg.png">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/1024px-Google_Chrome_icon_%28February_2022%29.svg.png">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/1024px-Google_Chrome_icon_%28February_2022%29.svg.png">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/1024px-Google_Chrome_icon_%28February_2022%29.svg.png">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/1024px-Google_Chrome_icon_%28February_2022%29.svg.png">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/1024px-Google_Chrome_icon_%28February_2022%29.svg.png">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/1024px-Google_Chrome_icon_%28February_2022%29.svg.png">
</div>

Does anyone know how to do this using keyframes or javascript or maybe a combination of these?

Answer 1

You could get the elements in javascript and add a class gradually with a setTimeout function

const div = document.getElementById("divID");
const children = div.childNodes;
const delay = 500; // time in milliseconds for the delay


// Your function that you might want to execute somewhere (maybe onLoad)
const childAppear = () => {
    children.forEach((child) => {
        setTimeout(() => {
            child.classList.add("transition-class");
        }, delay);
    }
}

Then for the CSS:

.container img {
    opacity: 0;
    transition: 1s; /* transition length */
 }

.transition-class {

    opacity: 100;
    /* any other styles you want for the transitioned image */
}

Don't forget to add an ID to your div element so you can access semantically in JavaScript

<div id = "divID">IMAGES</div>