Linked Questions

Popular Questions

How to delay element animation using javascript

Asked by At

So I am using a foreach method on an array and I want to add the animation after 1 second for each element so I can make the divs pop out one after another. So the first div comes up, then after thats done the next one and so on. I tried using i++ in a templates string but the first div disappears. Below is my code. Got any suggestions?

let list = charDivs.forEach((el, i) => {
    let pos = 0;
    pos++;
    el.style.cssText = `background-color:black;float:left;position:relative;top:50%;width:5rem;height:5rem;border-radius:30%;margin:0 20px;color:   #FFA500;position:relative;left:10%;transform:translate(-50%,-50%);font-weight:bold;font-size:2rem; display:flex;justify-content:center;align-items:center;animation:fadein 1s`;

    let addFadeIn = () => {
      el.style.animation = "fadein 1s 2 ";
    };

    setInterval(addFadeIn, 1000);

    el.textContent = smiley[i];
  });

Related Questions