Apply multiple classes with delay in between - angularjs

Question

I've been using Bootstrap 3, animate.css and Angular in an attempt to make a quick animation. I want the class to bounce down, stay for a few seconds and then bounce out. The bounce in works, but it never runs the seconds animation. I am in Chrome if that helps.
<alert ng-repeat="alert in alerts" type="alert.type" close="alert.close()" class="alert" ng-bind="alert.msg"></alert>
</div>
.alert {
background-color: #FFC;
font-size:16px;
font-weight:bold;
color: #1b7817;
-Webkit-animation-name: animate, bounceInDown, bounceOutUp;
-Webkit-animation-duration: 2s, 2s;
animation: animate, bounceIn, bounceOutUp;
animation-duration: 2s, 2s;
}

Answer 1

I was able to run two animations by changing your code slightly. Here's a fiddle http://jsfiddle.net/ysq71kap/1/
.alert {
background-color: #FFC;
font-size:16px;
font-weight:bold;
color: #1b7817;
-Webkit-animation: bounceInDown 2s ease, bounceOutUp 4s 2s ease;
animation: bounceInDown 2s ease, bounceOutUp 4s 2s ease;
}
I combined the animation into one line and then comma separated the two properties.
-webkit-animation: name duration timing-function, name duration delay timing-function;
Credit goes to #Giona Multiple webkit animations