css animationをjsで操作する方法

firstAnimationからsecondAnimationとJSを使ってfirstAnimationが終わったらsecondAnimationが始まる処理をしたいのですが、

html
1<div class="firstAnimation">
2 <div>
3 <div>
4 <div>
5 <div>
6 <div id="first_anime">
7</div>
8<div class="secondAnimation" id="is-not>
9<span>
10<span>
11<span>
12<span>
13<span>
14</div>

css


#is-not{display:none;}
＊animation
div:bth-child(1){animation: wave_s 1s ease 0.9s infinite,vanish 1s ease 3s forwards;}
div:bth-child(2){animation: wave_s 1s ease 0.9s infinite,vanish 1s ease 3s forwards;}
div:bth-child(3){animation: wave_s 1s ease 0.9s infinite,vanish 1s ease 3s forwards;}
div:bth-child(4){animation: wave_s 1s ease 0.9s infinite,vanish 1s ease 3s forwards;}
div:bth-child(5){animation: wave_s 1s ease 0.9s infinite,vanish 1s ease 3s forwards;}

span:bth-child(1){animation: wave_s 1s ease 0.9s infinite,vanish 1s ease 3s forwards;}
span:bth-child(2){animation: wave_s 1s ease 0.9s infinite,vanish 1s ease 3s forwards;}
span:bth-child(3){animation: wave_s 1s ease 0.9s infinite,vanish 1s ease 3s forwards;}
span:bth-child(4){animation: wave_s 1s ease 0.9s infinite,vanish 1s ease 3s forwards;}
span:bth-child(5){animation: wave_s 1s ease 0.9s infinite,vanish 1s ease 3s forwards;}

js
1
2$(function(){
3    $('#first_anime').on('animationend webkitAnimationend' ,function(){
4        $('.firstAnimation').attr('id','is-not'); //first animationを非表示
5        $('.secondAnimation').removeAttr('id'); //second animationを表示　→　アニメーション開始
6    });
7});

animationendを使ったのですが、要素一つ一つにアニメーションが複数あるので、
例えば、<div id="#first_animae">の wave_s が終わった瞬間、secondAnimationに移行してしまって　vanish　というアニメーションが終わっていないのに次に進んでしまします。
やりたいこととしてはfirstAniamtionが終わったらfirstAnimetionをdisplay:none;にして非表示にして
secondAnimetionを display:none;を取ってあげて、表示にしてあげて、アニメーションを開始したいという流れです。

説明不足だと思うので、意味わからんところがあれば、バシバシいってください。