CSS3 -- 动画animation可以多次点击

$(function(){
    $("ul li").click(function(){
        $("#btn").removeClass().addClass("shake");
        var set = setTimeout(function(){
            $("#btn").removeClass();    
        },1500)
    })
})

点击某元素，让另一个元素执行css3动画效果。

但第二次再点击，就不能执行动画了。

 

解决办法：

setTimeout(function(){
            $("#btn").removeClass();    
},1500)；

在动画执行完之后，让这个元素的样式自动清空。(虽然点击时已经有了一个清空样式，但那无效);

注意：这个1500毫秒，应该大于你设定的动画时间：-webkit-animation-duration:1s;

 

[下载 DEMO]

转载于:https://www.cnblogs.com/lufy/archive/2012/05/11/2495418.html