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]