将随机添加到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之间的任何位置的空白量- left或left属性。

我知道我可以用jquery和每次()来做这样的事情：

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

但是有没有一种方法可以将css循环绑定到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更改何时正确应用。

Answer 2

在每个新的动画迭代开始时，也会触发一个animationiteration事件，即除了第一个迭代之外的每个迭代。

$('#parachute_wrap').on('animationiteration webkitAnimationIteration oanimationiteration MSAnimationIteration', function(e) {
    $(this).css({left: Math.floor(Math.random() * 51) + 5 + '%'},0);
});

http://www.w3.org/TR/css3-animations/#animationiteration