CSS動畫快進和快退

Question

我想知道是否有可能使用某些JavaScript或jquery跳到下一個，或轉到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
});

Answer 1

除非您根據類將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');
});

Answer 2

通過使用animation-play-state屬性，您可以暫停動畫並更新轉換，然后重新啟動它。

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

但是，您不能暫停動畫，對其進行變換，繼續進行動畫，並期望它在新的變換狀態下流暢地運行。

目前，尚無法獲得CSS關鍵幀動畫的確切當前“完成百分比”。 近似它的最佳方法是使用setInterval或requestAnimationFrame。

該CSS技巧文章進一步對此進行了說明，並提供了使用setInterval的示例。 另一種選擇是使用請求動畫幀

如前所述，GreenSock或Velocity是動畫庫，可實現極其快速和流暢的動畫