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

在两者之间应用具有延迟的多个类

1 个答案: