Geek asks and answers

Add random css3 animation loop

Every time css3 animation loops I would like to change the variable in style.

For example, the following css removes the parachute group from top to bottom:

@-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 cycle, I would like to throw a random position X.

The default style for the group:

#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 somewhere between -200px and 200px.

I understand that 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);
});

css js, ? .. , js ? , JS 70- , , , , css js -, .

?

+5
2

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 .

+14

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

+2

More articles:


All Articles