应用多个类，两者之间有延迟答案

【问题标题】：Apply multiple classes with delay in between应用多个类，两者之间有延迟
【发布时间】：2014-09-05 17:44:18
【问题描述】：

我一直在使用 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;

 }

【问题讨论】：

标签： angularjs css twitter-bootstrap-3 animate.css

【解决方案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：名字duration time-function，名字duration delay time-function；

感谢@Giona Multiple webkit animations

【讨论】：