重新開始 CSS3 的動畫

最近寫專案遇到的問題，就是我用CSS3製作動畫，本來希望每次執行 event 的時候動畫可以重新開始，後來卻發現 CSS 的動畫一開始執行後就會執行到結束為止，這樣在製作上就會遇到一些問題。

理論上想說移除動畫的 class 後再加回去就可以了，可是實際上是失敗的。

view plaincopy to clipboardprint

1. $("#box").click(function() {   
2.   $(this).removeClass("run-animation").addClass("run-animation");   
3. });  

後來知道要解決的方法是要複製原本的原件後再把舊的移除，動畫才可以順利重頭開始。

view plaincopy to clipboardprint

1. $("#box").click(function() {          
2.     var $box=$("#box").clone().removeClass('run-animation');   
3.     $("#box").remove();   
4.     $(container).append($box);   
5.     $("#box").addClass('run-animation');   
6. });  

這樣就沒問題，只是因為涉及到 DOM 的新增刪除，在手機上看會稍微鈍一下。

參考: Restart CSS Animation
Restart CSS Animation