Применить несколько классов с задержкой между

Question

Я использовал Bootstrap 3, animate.css и Angular, чтобы сделать быструю анимацию. Я хочу, чтобы класс отскакивал, оставался на несколько секунд, а затем отскакивал. Откат в работе, но он никогда не запускает анимацию секунд. Я в Chrome, если это помогает.

<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

Мне удалось запустить две анимации, слегка изменив код. Вот скрипка 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; 

}

я объединил анимации в одну линию, а затем разделенные запятой два свойства.

-webkit-animation: название продолжительность функция времени, имя длительность задержки время-функция;

Кредит отправляется @Giona Multiple webkit animations