國內(nèi)關(guān)于重新運行CSS動畫的資料較少，本文譯自Restart CSS Animation并進行擴展，有需要的可以參考，文章如有問題希望能指正。
對于CSS animation（和@keyframes），“重新運行”并不像你想象中那么容易。
假如你將它設(shè)置成運行一次：<pre><b>/* CSS /
.run-animation {
-webkit-animation: my-fancy-animation 5s 1;
-moz-animation: my-fancy-animation 5s 1;
animation: my-fancy-animation 5s 1;
}</b></pre> 你將它運行在你的logo上：<pre><b>/ HTML */
<h1 id='logo' class='run-animation'>
Fancy Logo
</h1>
</b></pre>
方法1：切換class####
在某些情況下你可能想讓這段動畫再次運行，例如通過一次點擊。你可能想CSS會提供一種方式來再次啟動它，但據(jù)我所知并沒有。你也許甚至嘗試通過JavaScript（jQuery)來移除并重新添加class name 注.。<pre><b>
/* jQuery /
$('#logo').click(function(){
// 不起作用
$(this).removeClass('run-animation').addClass('run-animation');
});</b></pre> ~~注：在碰到這個問題時譯者我也曾使用上述辦法，確實不起作用，后來經(jīng)改造后，使用toggleClass就解決了，如下：<pre><b>/ jQuery */
$('#logo').click(function(){
</b>// 起作用了<b>
$(this).toggleClass('run-animation');</b>
//那文章后面還有用么？我也不知道，邊看邊翻譯，希望有驚喜_<b>
});</b></pre>~~
方法2：重載元素####
如果你在removeClass和addClass之間設(shè)置一個很低的延遲（如setTimeout()），這就起作用（上文toggle就有這個效果），但這不是很理想。真正需要做的是將元素從頁面完全移除，然后重新插入它。我們使用jQuery來進行演示，步驟是克隆原始元素，插入到自身之后，移除原始元素。<pre><b>/* jQuery */
$('#logo').click(function(){
var el = $(this),
newone = el.clone(true);
el.before(newone);
$('.' + el.attr('classs') + 'last').remove();
});
</b></pre> 或用最基本的JavaScript：<pre><b>
var elm = this,
newone = elm.cloneNode(true);
elm.parentNode.replaceChild(newone, elm);
</b></pre>點擊查看演示
方法3：相同動畫，不同名字####
同樣的問題存在于任何類型的事件中。例如你設(shè)置了一個會直接運行的動畫，并需要在:hover 時再次運行。同樣的問題，它不會再次運行。Oli Studholme對此有些有趣的研究。圍繞這個問題的一個方法是通過兩個除名字外，其它完全相同的動畫，然后你可以切換到那個用于:hover事件（或其它事件），它會起作用。<pre><b>/* CSS */
img {animation: spin-cat-1 2s;}
img:active {animation: spin-cat-2 2s;}
@keyframes spin-cat-1 {50%{transform:rotateY(180deg);}}
@keyframes spin-cat-2 {50%{transform:rotateY(180deg);}}
</b></pre>點擊查看演示
CSS預(yù)處理器可以幫助簡化維護,通過導(dǎo)入代碼塊所以你只需要維護一次,但最終y軸代碼量增加。不幸的是你也不能在一個聲明種定義多個關(guān)鍵幀動畫的名字，雖然這是有用的（不單單為了這個，還有更復(fù)雜的動畫，你可以在基礎(chǔ)關(guān)鍵幀動畫上重寫某些關(guān)鍵幀）。
Oli考慮了各種技術(shù)來解決這個問題，如改變altering duration，delays，和iterations來代替改變名字。但在我看來，這些甚至比不上改變名字。
方法4：切換class####
在刪除和添加class之間觸發(fā)一個回流。例如：
<pre><b>/* JavaScript */
//檢索元素
element = document.getElementById("logo");
//重設(shè)transition,通過：
element.addEventListener("click", function(e) {
e.preventDefault;
// ->移除class
element.classList.remove("run-animation");
// ->觸發(fā)回流，真實的魔法?。。?..
// 缺少下面這句不會運行。嘗試刪除這句動畫不會被再次觸發(fā)
element.offsetWidth = element.offsetWidth;
// ->重新添加class
element.classList.add("run-animation");
}, false);
</b></pre>
其他####
以下是記錄的相關(guān)要點：你也可以影響通過JavaScript改變CSS animation的播放狀態(tài)，如暫停和重新啟動。<pre><b>element.style.webkitAnimationPlayState="paused";
element.style.webkitAnimationPlayState="running";</b></pre> 顯然，需要考慮到其他廠商的前綴屬性。
有趣的是,一般的CSS動畫不會設(shè)置play-state為“pause”。你必須要自己設(shè)置。如果你想每當:hover時重新啟動animation，你可以使用jQuery：<pre><b>$("#thing").hover(function() {
this.style.webkitAnimationPlayState = "running";
$(this).on('webkitAnimationEnd', function() {
this.style.webkitAnimationPlayState = "paused";
});
});
</b></pre> 注意：你必須留意應(yīng)該通過AnimationEnd事件將它設(shè)置回“pause”否則它的重啟不會像你想的那樣。
譯者結(jié)語####
以上就是關(guān)于重新運行CSS動畫的全文翻譯了，toggleClass的方法是特定場景才能用，來源。以上如有存在紕漏，希望能提出。
關(guān)于CSS動畫的兼容處理與AnimationEnd還有一些非常有用的擴展，但要等找到工作后再總結(jié)了。
