Add random to a css3 animation loop

Question

Each time a css3 animation loops I'd like to change a variable in the style.

For example the following css drops a group of parachutes from the top to the bottom of the screen:

@-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.

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.

I understand I could do something like this with jquery and 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.

How would you approach this?

If sync is your only worry, you could change the parachute_wrap css from an ID to a class, then assign it to the elements you want inside a $(document).ready() event setting your timer right after it, inside the .ready() as well. There might be an easier way around, but this is what I can think of right now. — Fabrício Matté
– Fabrício Matté, Commented May 16, 2012 at 0:27
This appears to be a near-duplicate of this question. The accepted answer seems to offer a way ahead. — Beetroot-Beetroot
– Beetroot-Beetroot, Commented May 16, 2012 at 1:08

Zuul · Accepted Answer · 2012-05-16 00:56:53Z

14

CSS3 animations have an animationEnd event fired when the animation completes.

You can bind that event to your animated element thus triggering that left change at the end of each animation:

$('#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 left change is applied correctly.

answered May 16, 2012 at 0:56

Zuul

16.3k6 gold badges63 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

maiis · Accepted Answer · 2013-07-05 12:51:15Z

2

There is also an animationiteration event fired at the start of every new animation iteration, i.e. every iteration except the first.

$('#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

answered Jul 5, 2013 at 12:51

maiis

7651 gold badge6 silver badges13 bronze badges

Collectives™ on Stack Overflow

Add random to a css3 animation loop

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related