javascript - 将随机添加到 css3 动画循环

Question

每次 css3 动画循环时，我想更改样式中的一个变量。

例如，以下 css 从屏幕顶部到底部放置一组降落伞:

@-webkit-keyframes fall {
  0% { top: -300px; opacity: 100; }
  50% { opacity: 100; }
  100% { top: 760px; opacity: 0; }
}

#parachute_wrap {
  -webkit-animation-name: fall;
  -webkit-animation-iteration-count: infinite; 
  -webkit-animation-duration: 70s;
  -webkit-animation-timing-function: linear;
}

然而，理想情况下，在每个循环结束时我想放入一个随机的 X 位置。

组的默认样式是:

#parachute_wrap {
  position: absolute;
  top: -300px;
  left: 50%;
  margin-left: 140px;
}

所以 70 秒后，我想在 -200px 和 200px 之间的任何位置更改 margin-left 或 left 属性。

我知道我可以用 jquery 和 everytime() 做这样的事情:

$('#parachute_wrap').everyTime ( 70000, function (){
    $("#parachute_wrap").css({left: Math.floor(Math.random() * 51) + 5 + '%'},0);
});

但是有没有办法将 css 循环绑定(bind)到 js 来做到这一点？即是否有 js 可以收听的任何类型的返回调用以与动画完美同步？我担心如果我在 70 年代的计时器上使用 JS，将会发生的事情是时间将不会正确同步，并且在 css 动画进行到一半时，js 将执行其定时循环并且降落伞将在一半的地方跳来跳去通过动画的方式。

你会如何处理这个问题？

Answer 1

CSS3 动画有一个 animationEnd 事件在动画完成时触发。

您可以将该事件绑定(bind)到您的动画元素，从而在每个动画结束时触发left 更改:

$('#parachute_wrap').on('webkitAnimationEnd mozAnimationEnd msAnimationEnd oAnimationEnd animationEnd', function(e) {
    $(this).css({left: Math.floor(Math.random() * 51) + 5 + '%'},0);
});

这样，您就可以确切地知道动画何时结束以及正确应用 left 更改。