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分成不同的部分，然后添加/删除类，否则这是不可能的。

然而，有一个名为Greensock的绝对精彩的javascript库，它允许基于时间轴的动画 - 并且在许多情况下比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 tricks article进一步解释了这一点，并给出了使用setInterval的示例。另一种选择是使用request animation frame

如前所述，GreenSock或Velocity是动画库，可以实现极其快速和流畅的动画

css动画快进和快退

2 个答案: