javascript - 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');
});