addEventListener for specific animationName - css-animations

Question

I have written the code below. I'm trying to invoke functions one after the other based on 'animationend' eventlisteners. The problem arises in the js code after startScreenContainer.classList.add('thisFadeOut');
I expected the function: removeStartScreen(); to be called by the animationend event of: thisFadeOutAnim. I'm guessing that removeStartScreen(); is being called by the animationend event of rainbowFlashAnim, because the element startScreenContainer is being assigned the classes thisFadeOut & thisRemove at the same time. So thisFadeOutAnim doesn't get chance to run. I have searched online and have found some info on animationName but I can't get my head around how to implement the concept. Or am I just doing everything all wrong!?
My question: Is there a way to add an event listener to events of a specific animation?
var startButton = document.querySelector('#startButton');
startButton.addEventListener('mouseup', startButtonClicked);
function startButtonClicked(){
startButton.classList.remove('startButtonPulse');
startButton.classList.add('startButtonClicked');
startButton.innerHTML = "LET'S GO!";
startButton.addEventListener('animationend', fadeOutStartScreen);
function fadeOutStartScreen(){
var startScreenContainer = document.querySelector('#startScreenContainer');
startScreenContainer.classList.add('thisFadeOut');
startScreenContainer.addEventListener('animationend', removeStartScreen);
function removeStartScreen(){
startScreenContainer.classList.add('thisRemove');
}
}
}
.startButtonPulse{
animation: buttonPulseAnim 1.5s;
animation-iteration-count: infinite;
animation-timing-function: ease;
}
#keyframes buttonPulseAnim {
0% {transform: scale(1);}
12.5% {transform: scale(1.05);}
25% {transform: scale(1);}
37.5% {transform: scale(1.05);}
50% {transform: scale(1);}
}
.startButtonClicked{
animation: rainbowFlashAnim 0.5s;
animation-iteration-count: 4;
animation-fill-mode: forwards;
}
#keyframes rainbowFlashAnim{
20% {background: cyan;}
40% {background: lime;}
60% {background: magenta;}
80% {background: red;}
}
.thisFadeOut {
animation-name: thisfadeOutAnim;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
#keyframes thisfadeOutAnim {
from {opacity: 1;}
to {opacity: 0;}
}
.thisRemove {
display: none !important;
}

Answer 1

Ok, so I have worked out a way:
element.addEventListener('animationend', function(e){
if(e.animationName === 'nameOfYourAnimation'{
//do something...
}
});
Beautiful!!

Answer 2

I haven't tested it but I don't you can attach an event to some animation.
I think you shall do it like this
btn1 clicked fire function1
function1:
start animation1 for 2s
after 2s call function2 (user setTimeout)
function2:
start animation2 for 1s
after 1s call some other function