Hello fellow programmers!

I'm working with designing buttons to a quiz, and I have two questions for you today.

The first one is, if I have an animation in CSS already, for example the one below, how do I activate the animation on an ID with Javascript?

The second one is, how do I make sure that the animation is finished before anything else happens? Because I will be changing the buttons' classes right after the buttons are pressed. I want the buttons' animations to finish, and then change the classes. So is there some sort of timer for that?

Code:
&-webkit-keyframes exampleAnimation{
    background-color: red;
    transition: 0.5s;
}