title: Add random to a css3 animation loop
body: <p>Each time a css3 animation loops I'd like to change a variable in the style.</p>
  
  <p>For example the following css drops a group of parachutes from the top to the bottom of the screen:</p>
  
  <pre><code>@-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;
  }
  </code></pre>
  
  <p>Ideally however, at the end of each loop I'd like to throw in a random X position. </p>
  
  <p>The default style of the group is:</p>
  
  <pre><code>#parachute_wrap {
    position: absolute;
    top: -300px;
    left: 50%;
    margin-left: 140px;
  }
  </code></pre>
  
  <p>So after 70 seconds, I would like to change the margin-left or left attribute anywhere between -200px and 200px.</p>
  
  <p>I understand I could do something like this with jquery and everytime():</p>
  
  <pre><code>$('#parachute_wrap').everyTime ( 70000, function (){
      $("#parachute_wrap").css({left: Math.floor(Math.random() * 51) + 5 + '%'},0);
  });
  </code></pre>
  
  <p>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.</p>
  
  <p>How would you approach this?</p>