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

Question

JSFiddle在这里

您可以从示例中看到，我正在尝试为从顶部向下的盒子设置动画，然后几秒钟后它会跳动。我正在使用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 它可以工作，但为什么两者不能一起工作？

为了让事情变得更复杂，添加删除元素的动画会起作用，就像在这个 fiddle中一样。

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

• 闪光
• 弹跳
• 摇
• 多田
• 摇摆
• 摇晃
• 脉冲

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);