如何在原單狀態

我使用這個動畫的AJAX加載程序暫停CSS動畫：http://codepen.io/hericdk/pen/niweF 現在，當Ajax調用完成後，我想動畫GIF更改爲「對勾」然後我想動畫暫停，然後慢慢淡出，所以我做的：如何在原單狀態

$('.spinner').css("background-image", "url('/img/complete.png')"); 
$('.spinner').addClass("animationpaused"); 
$('.spinner').fadeOut(800);

其中animationpaused CSS是：

.animationpaused{ 
    -webkit-animation-play-state:paused !important; 
    -moz-animation-play-state:paused !important; 
    -o-animation-play-state:paused !important; 
    animation-play-state:paused !important; 
}

問題是有時我能「對號」圖標倒掛暫停。如何暫停CSS動畫並確保它在原始狀態下暫停，以便我的圖標永遠不會顛倒過來？

編輯：我添加了小提琴，使這個更加清晰：點擊停止按鈕，我想動畫繼續第1幀，然後停止，以便檢查圖標會在原來的位置後 http://jsfiddle.net/oL31LwdL/1/ Basicly。

來源

2015-11-13 Grzegorz Zieliński

暫停將立即暫停動畫，設置'動畫name'到'none'將使它彈回原來的位置立即。它不會順利地回到原始狀態。據我所知，沒有辦法優雅地過渡/動畫回到原來的位置。 – Harry

您可以添加動畫填充模式。在你的情況，你可能需要：

animation-fill-mode: none;

瞭解更多有關在這裏：https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

來源

2015-11-13 13:11:05

我已添加animation-fill-mode：none;但沒有任何變化我仍然做錯了事 - 看我的小提琴：http://jsfiddle.net/oL31LwdL/1/ 基本上，點擊停止按鈕後，我想動畫繼續第一幀，然後停止，所以檢查圖標將是在原來的位置。 –

在你的情況下，你需要使用這一行ALSO：animation-name：none;與動畫填充模式一起：無;看看小提琴：http://jsfiddle.net/oL31LwdL/2/ –

@DejanMunjiza：正如我剛剛在我對這個問題的評論中指出的那樣，設置'animation-name：none'不會優雅地將它移回原始狀態，它會立即恢復。當「動畫持續時間」更長時，這會更明顯。我知道OP已經接受了答案，但留下了評論信息的目的。 – Harry

如何在原單狀態

回答

相關問題