保持css動畫狀態

Question

我正在將 css 關鍵幀動畫應用於元素。 我只為一個簡單的變換指定一個關鍵幀 (100%)。 在動畫運行時，我使用動畫播放狀態暫停並應用指定不同關鍵幀動畫的類。 我想要的是第二個動畫從第一個動畫被中斷的地方開始，但是元素跳回到它的開始位置並從那里開始動畫。 我用動畫填充模式玩了一點，但它沒有改變，我認為這是因為動畫在達到 100% 之前被中斷了。 有什么想法我可以做些什么來使這項工作？

Answer 1

幾天前，我實際上正在集思廣益。 假設您的問題是動畫未達到 100% 的結果，您是正確的。 問題是無法簡單地選擇指示動畫在動畫中的距離的值。 由此，您有以下三個選項（注意：我沒有測試所有這些）：

1. 您可以將動畫分解為定義的步驟（10% 間隔、20% 間隔等），然后僅在其中一個步驟上暫停。 這可能是最安全的解決方案，但您可能必須以時間為基礎（即setInterval等 - 糟糕！）
2. 您可以使用 JavaScript 計算（也基於時間 - Double Yuck！）元素所在的位置，並相應地設置一個新的keyframe
3. 您可以嘗試在動畫暫停時查看元素的屬性（我沒有嘗試過，我非常懷疑它會起作用）

Answer 2

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

動畫實際上並沒有改變 css，它們只是動畫它然后把它放回原來的位置。 你只需要使用 javascript 來保存 css 使用類似的東西

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

然后在暫停動畫后，將其設置為

$("div").css("width",prevWidth); .

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

Answer 3

您在這里有幾個選擇：

1. 將新動畫添加到具有不同播放狀態的列表中。 這不是很可擴展，但適用於某些情況。
2. 使用getComputedStyle捕獲動畫值並getComputedStyle應用。 這樣做的缺點是，對於transform ， getComputedStyle返回的值被轉換為matrix()值，因此旋轉動畫的插值有時會有所不同。
3. 使用commitStyles()為你做這件事。 問題在於瀏覽器支持。 它應該適用於最新的 Firefox 和 Safari，以及下一個版本的 Chrome（在 Canary 中適用於我）。

您可以在此處查看演示的每種方法： https : //jsfiddle.net/birtles/8bv5of6n/14/