title: Alter CSS3 animation loop when object leaves page
body: <p>I have a CSS3-based animation with the "infinite" property set on the animation. You can see a demo at <a href="http://codepen.io/mprewitt/pen/Ezyuq" rel="nofollow">http://codepen.io/mprewitt/pen/Ezyuq</a></p>
  
  <p>What I want to do is change the X position of the elements when they float off the top of the page, so that when they resume at the bottom of the page, they are in a new, random position. I thought I could do it with the jQuery "animationend" call-back, but it doesn't seem to work. Either my code is wrong, or the fact that the CSS animation is set to "infinite" means that it never ends (I thought maybe the end of the loop would be considered an "end", but maybe not).</p>
  
  <p>Here is the jQuery code:</p>
  
  <pre><code>$( document ).ready(function() {
    $( ".ani-bubble" ).on( 'animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(e){
  
      // Change the item's 'left' property to a random value from -20% to 120%.
      var bubbleoffset = Math.floor((Math.random() * 140) - 19);
      $(this).css({ 'left': bubbleoffset+'%' });
  
    });
  });
  </code></pre>