javascript 将随机添加到 css3 动画循环
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10610381/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add random to a css3 animation loop
提问by willdanceforfun
Each time a css3 animation loops I'd like to change a variable in the style.
每次 css3 动画循环时，我都想更改样式中的一个变量。
For example the following css drops a group of parachutes from the top to the bottom of the screen:
例如，下面的 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;
}
Ideally however, at the end of each loop I'd like to throw in a random X position.
然而，理想情况下，在每个循环结束时，我想放入一个随机的 X 位置。
The default style of the group is:
该组的默认样式为：
#parachute_wrap {
position: absolute;
top: -300px;
left: 50%;
margin-left: 140px;
}
So after 70 seconds, I would like to change the margin-left or left attribute anywhere between -200px and 200px.
所以在 70 秒后，我想在 -200px 和 200px 之间的任何地方更改 margin-left 或 left 属性。
I understand I could do something like this with jquery and everytime():
我知道我可以用 jquery 和 everytime() 做这样的事情：
$('#parachute_wrap').everyTime ( 70000, function (){
$("#parachute_wrap").css({left: Math.floor(Math.random() * 51) + 5 + '%'},0);
});
But is there a way to tie the css loop to js to do this? i.e. is there a return call of any kind which js can listen to for perfect syncing with the animation? I fear that if I use JS on a 70s timer whats going to happen is the timing is going to not sync right, and half way through the css animation the js will do its timed loop and the parachutes are going to jump around the place half way through the animation.
但是有没有办法将 css 循环绑定到 js 来做到这一点？即是否有任何类型的返回调用，js 可以收听以与动画完美同步？我担心如果我在 70 秒计时器上使用 JS 会发生什么是时间不会同步正确，并且在 css 动画进行到一半时 js 将执行其定时循环并且降落伞将在该位置周围跳跃一半通过动画的方式。
How would you approach this?
你会如何处理这个问题？
回答by Zuul
CSS3 animations have an animationEndevent fired when the animation completes.
CSS3 动画animationEnd在动画完成时会触发一个事件。
You can bindthat event to your animated element thus triggering that leftchange at the end of each animation:
您可以bind将该事件发送到您的动画元素，从而left在每个动画结束时触发该更改：
$('#parachute_wrap').on('webkitAnimationEnd mozAnimationEnd msAnimationEnd oAnimationEnd animationEnd', function(e) {
$(this).css({left: Math.floor(Math.random() * 51) + 5 + '%'},0);
});
This way, you know exactly when the animation ends and the leftchange is applied correctly.
这样，您就可以准确地知道动画何时结束并left正确应用更改。
回答by maiis
There is also an animationiterationevent fired at the start of every new animation iteration, i.e. every iteration except the first.
在animationiteration每个新动画迭代开始时也会触发一个事件，即除了第一次之外的每个迭代。
$('#parachute_wrap').on('animationiteration webkitAnimationIteration oanimationiteration MSAnimationIteration', function(e) {
$(this).css({left: Math.floor(Math.random() * 51) + 5 + '%'},0);
});
