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更改。

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

随机添加到css3动画循环

2 个答案: