Adding animations to the buttons in sequence within a certain time-CodePudding

For example, I have 5 buttons and I have a time of 10 seconds. I'm trying to play animations behind each button, starting from the 1st button, for 2 seconds each. But as I tried below, after playing the animations in sequence, it gets mixed up and the animations of the buttons play randomly. Below are the codes I have tried.

I have one function as follows, and when the time is up, I enter this function and process it.sorry i am new to javascipt i tried this way.Exactly what I want:The animation of the 1st button will play for 2 seconds and it will switch to the animation of the 2nd button, it will play for 2 seconds and will switch to the animation of the 3rd button. So in order

function reset() {
            document.getElementById("1").style.animation = "glowing 500ms infinite";
            setTimeout(function () {
                document.getElementById("1").style.animation = "none";
            }, 500);
            setTimeout(function () {
                document.getElementById("2").style.animation = "glowing 500ms infinite";
            }, 500);
            setTimeout(function () {
                document.getElementById("2").style.animation = "none";
            }, 1000);
            setTimeout(function () {
                document.getElementById("3").style.animation = "glowing 500ms infinite";
            }, 1000);
            setTimeout(function () {
                document.getElementById("3").style.animation = "none";
            }, 1500);
            setTimeout(function () {
                document.getElementById("4").style.animation = "glowing 500ms infinite";
            }, 1500);
            setTimeout(function () {
                document.getElementById("4").style.animation = "none";
            }, 2000);
            setTimeout(function () {
                document.getElementById("5").style.animation = "glowing 500ms infinite";
            }, 2000);
            setTimeout(function () {
                document.getElementById("5").style.animation = "none";
            }, 2500);

}

CodePudding user response：

As I told you in my first comment (to which you did not react), you must use a chain of promises.

there are a lot of technical things to know (the MDN doc is there for that)
and I'm not some kind of teacher; anyway StackOverflow is not an online college.

start with generator functions

However, if you have any questions... ;)
-- but SO is already full of questions and answers on many technical points used here

this can result in JS code like this:

CSS part

.glowing500 { animation : glowing 500ms infinite; }
.noAnim     { animation : none;                   }

/* ... */

JS part

const 
  btn_A = document.getElementById('1') 
, btn_B = document.getElementById('2') 
, btn_C = document.getElementById('3') 
, btn_D = document.getElementById('4') 
, btn_E = document.getElementById('5')
, delay             = ms => new Promise(r => setTimeout(r, ms))
, animLoopGenerator = function* ()
  {
  const animLoop = 
  [ { stop: null,  start: btn_A, time_ms: 2000 } 
  , { stop: btn_A, start: btn_B, time_ms: 2000 }
  , { stop: btn_B, start: btn_C, time_ms: 2000 }
  , { stop: btn_C, start: btn_D, time_ms: 2000 }
  , { stop: btn_D, start: btn_E, time_ms: 2000 }
  , { stop: btn_E, start: null,  time_ms: null }
  ];
  for( elm of animLoop) yield  elm;
  };

async function do_Animtions()
  { 
  for await ( { stop, start, time_ms } of animLoopGenerator() )
    {
    if (stop)    stop.classList.replace('glowing500','noAnim' );
    if (start)   start.classList.add('glowing500');
    if (time_ms) await delay(time_ms);
    }
  }

//...

do_Animtions();

CodePudding user response：

i am not sure if this is what you want because you didnt provide actual css and html but you can delay animations with css like this.hope it helps

.btn {
        padding: 10px 30px;
        border:1px solid black;
        background-color:white;
        animation: glowing 2s;
    }

    .btn:nth-child(2) {
        animation-delay: 2s;
    }
    .btn:nth-child(3) {
        animation-delay: 4s;
    }
    .btn:nth-child(4) {
        animation-delay: 6s;
    }
    .btn:nth-child(5) {
        animation-delay: 8s;
    }

    @keyframes glowing {
        50% {
            background-color: red;
        }

        100% {
            background-color: blue
        }
    }

    <button >Number1</button>
    <button >Number2</button>
    <button >Number3</button>
    <button >Number4</button>
    <button >Number5</button>