你能用CSS強制一個CSS關鍵幀動畫到它的最終狀態嗎？

我有滾動行爲觸發的CSS關鍵幀動畫。如果用戶滾動速度太快，我希望能夠使用JavaScript將動畫發送到他們的「完成/最終」狀態，因爲動畫是互相構建的。你能用CSS強制一個CSS關鍵幀動畫到它的最終狀態嗎？

說我有一個3000ms動畫，我決定我想在1500ms過去後完成 - 是否可以強制這個CSS關鍵幀動畫使用JS提前完成？

** PS - 我是而不是談論堅持使用forwards填充模式的最終幀的屬性。

謝謝！

2014-05-09 Kyle Suss

如何使用類控制地位一樣此：

.play{ 
    animation: animationFrames ease 5s; 
    -webkit-animation: animationFrames ease 5s; 
    -moz-animation: animationFrames ease 5s; 
    -o-animation: animationFrames ease 5s; 
    -ms-animation: animationFrames ease 5s; 
} 

.end{ 
    transform: translateX(100px); 
    -moz-transform: translateX(100px); 
    -webkit-transform: translateX(100px); 
    -o-transform: translateX(100px); 
    -ms-transform: translateX(100px); 
}

JavaScript

$('#end').click(function(){ 
    $('#box').removeClass('play').addClass('end'); 
});

http://jsfiddle.net/a2Gsh/

來源

2014-05-09 06:36:16 emn178

用這種方法多運氣一點。我需要平滑一點，但它的工作到目前爲止。謝謝！ –

@KyleSuss和emn178，此方法的後退是您需要對所有動畫實例的結束樣式進行硬編碼。 – Arbel

是，簡單地改變動畫時間結束動畫更快，

elementWithAnimation.style.animationDuration="1500ms";

你需要瀏覽器的前綴，例如用於WebKit的：

elementWithAnimation.style.webkitAnimationDuration="1500ms";

來源

2014-05-09 04:24:49 Arbel

嗯。試過這個，但似乎沒有工作。甚至添加了一個'！重要'只是爲了看看它是否被另一個規則所覆蓋。 –

@KyleSuss這是裸露的線條。您需要添加瀏覽器前綴。用webkit的例子更新了答案。 – Arbel

你能用CSS強制一個CSS關鍵幀動畫到它的最終狀態嗎？

回答

相關問題