Why doesn't animationend event trigger?

Question

In this picture, I've been trying to make a progress bar: 3 progress bars. The idea is that the first progress bar has a class with the animation name required to fill the bar, and on animationend event, the class is added to the second progress bar, and so on till the last one. when last animation ends, the class is removed from all bars and added again after some milliseconds to the first one. The strange thing is, when the last bar becomes filled, and then I leave the browser tab to another one before the first animation starts then return again, it doesn't make an animation or trigger animationend and stops like this: first bar filled without animation I am confused now, can you please explain this? related html code:

            <div class="progress-bar">
            <div class="progress-cont">
                <div class="progress start-prog"></div>
            </div>
            <div class="progress-cont">
                <div class="progress"></div>
            </div>
            <div class="progress-cont">
                <div class="progress"></div>
            </div>
        </div>

css class used to make animation:

.start-prog {
animation: 3s linear progress;
animation-fill-mode: forwards;
}
@keyframes progress {
from {width: 0}
to {width: 100%}
}

javascript:

let progressBars = document.getElementsByClassName("progress");
for (let i = 0; i <= 2; i++) {
progressBars[i].addEventListener("animationend", function() {
    setTimeout(function() {
        if (i == progressBars.length - 1) {
            for (prog of progressBars) {
                prog.classList.remove("start-prog");
            }
            setTimeout(() => progressBars[0].classList.add("start-prog"), 100);
            return;
        }
        progressBars[i + 1].classList.add("start-prog");
    }, 500);
})
}

note: This happens in Chrome but not in Firefox.