随机添加到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循环绑定到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正确应用了更改.