保持css動畫狀態

Question

我正在將css關鍵幀動畫應用到元素。我只爲一個簡單的變換指定了一個關鍵幀（100％）。當動畫運行時，我使用動畫playstate暫停並應用指定不同關鍵幀動畫的類。我想要的是第二個動畫從第一個動畫被中斷的地方開始，而元素跳回到它的開始位置並從那裏開始動畫。我用動畫填充模式玩了一下，但它並沒有改變，我認爲是因爲動畫在它達到100％之前被打斷了。任何想法我可以做什麼使這項工作？

Answer 1

幾天前，我實際上正在集思廣益。假設你的問題是你的動畫未達到100％的結果，你是正確的。問題在於沒有辦法簡單地選擇這些值來指示動畫在動畫中做了多少距離。從此，您有以下三種選擇（注：我沒有測試過所有的人）：

1. 可以打破動畫到定義的步驟（10％區間，20％的時間間隔等），然後只暫停其中的一個步驟。這可能是最安全的解決方案，但您可能必須按時（例如，setInterval等 - Yuck！）
2. 您可以計算（也基於時間 - 雙Yuck！）元素是，使用JavaScript中，併成立了新的keyframe相應
3. 你可以嘗試一下元素的屬性在那個動畫暫停（我還沒有嘗試這樣做，我很懷疑這將工作）的時間

Answer 2

http://jsfiddle.net/gxve9/1/

動畫並沒有改變css，他們只是動畫，然後把它放入bac k它在哪裏。你只需要使用JavaScript保存使用的東西像CSS

var prevWidth = $("div").css("width");

，然後暫停動畫後，與

$("div").css("width",prevWidth);設置。

這樣它就會永久保持第一個動畫放置的位置。