5

每次 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 会进行定时循环，降落伞会在一半的地方跳跃通过动画的方式。

你会如何处理这个问题？

4

2 回答 2

14

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正确应用更改。

于 2012-05-16T00:56:53.250 回答
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

于 2013-07-05T12:51:15.130 回答