使用animate.css在设定时间后运行动画

Question

JSFiddle here

您可以从示例中看到我正在尝试为从顶部向下的盒子设置动画，然后几秒后它将会发出脉冲。我正在使用animate.css

HTML

<div class="animated bounceInDown box" id="icon1">This is a test</div>

JS

setInterval(function() {
    console.log('Running animation');
    $('#icon1').addClass('animated pulse');
}, 4000);

如果你带走了bounceInDown它可以工作，但为什么不能同时工作呢？

为了使事情变得更复杂，添加删除元素工作的动画like in this fiddle。

似乎我不能在计时器中使用以下任何动画，有谁知道为什么？或者这是一个错误吗？

• flash
• 反弹
• 摇晃
• tada
• 摆动
• 摆动
• 脉冲

Answer 1

似乎你不能同时应用多个类动画。

在应用新课程之前删除bounceInDown效果很好：

$('#icon1').removeClass('bounceInDown').addClass('pulse');

活生生的例子：http://jsfiddle.net/GunhR/2/

Answer 2

试试这个

setTimeout(function() {
    console.log('Running animation');
    $('#icon1').removeClass('bounceInDown');
    $('#icon1').addClass('pulse');
}, 4000);