css動畫快進和快退

我想知道是否有可能，使用一些JavaScript或jQuery，跳到下一個，或去一個CSS動畫的最後部分。比方說，我們有以下幾點：css動畫快進和快退

@keyframe effect{ 
    0%{opacity:1;} 
    45%{opacity:1;} 
    50%{opacity:0;} 
    95%{opacity:0;} 
    100%{opacity:1;} 
}

將淡出出來的東西，然後再在

所以可以說我做了一些按鈕。我將如何做到以下幾點：

$('#next').click(function(){ 
    //skip to the next animation part 
}); 
$('#previous').click(function(){ 
    //skip to the previous animation part 
});

來源

2013-10-15 Ryan Saxe

什麼百分比代表什麼？ –

@HamzaKubba百分比表示動畫時間線 – ahren

啊，實際上這是一個愚蠢的問題，因爲我認爲這是提問者定製的東西，但實際上它是一些我不知道的新CSS。 :) –

除非你打破CSS到基於類不同的部分，然後添加/刪除班，它是不是真的有可能。

但是，有一個絕對的夢幻般的JavaScript庫叫做Greensock，它允許基於時間軸的動畫 - 在很多情況下比CSS動畫更快。它還具有跨瀏覽器兼容的優點。

如果你是，例如創建使用使用GreenSock類似的東西，它會是這個樣子：

var effect = new TimelineMax({paused:true}); 

effect.addLabel('start'); 
effect.to(
    '#myItem', 
    1, 
    {css:{opacity:1}} 
); 
effect.addLabel('step1'); 
effect.to(
    '#myItem', 
    1, 
    {css:{opacity:0}} 
); 
effect.addLabel('end'); 

effect.play(); 

$('#gotoEnd').on('click', function(e){ 
    e.preventDefault(); 
    effect.seek('end'); 
});

來源

2013-10-15 03:44:52 ahren

通過使用動畫播放狀態屬性，你可以暫停動畫和更新轉換，然後重新啓動它。

element.style.webkitAnimationPlayState = "paused"; 
element.style.webkitAnimationPlayState = "running";

但是，您不能暫停動畫，轉換它，恢復它，並期望它從新的轉換狀態流暢地運行。

目前，沒有辦法獲得CSS關鍵幀動畫的確切當前「完成百分比」。估計它的最好方法是使用setInterval或requestAnimationFrame。

這個CSS tricks article解釋了這一點，並給出了一個使用setInterval的例子。另一種選擇是使用request animation frame

如前所述使用GreenSock或速度的動畫庫，它允許非常快速和流暢的動畫

來源

2014-10-15 11:45:08

css動畫快進和快退

回答

相關問題