title: Javascript Alternative to Animation-Iteration-Count as Infinite
body: <p>I am trying to create a firework animation via JavaScript. I have invoked CSS3 animations with jQuery using an iteration count of <code>1</code>, but with the <code>webkitAnimationEnd</code> event -- which doesn't trigger when you use a pure CSS3 iteration count of infinite -- so I feel it would be more appropriate to use a loop.</p>
  
  <p>I'm choosing JavaScript because I need to play the event sequentially but with more control than CSS3 offers.</p>
  
  <p>Example: <a href="http://codepen.io/tusharsaurabh/pen/YpqOZB" rel="nofollow noreferrer">http://codepen.io/tusharsaurabh/pen/YpqOZB</a></p>
  
  <hr>
  
  <p>Animation doesn't get initiated when I execute it in a loop. In one another Stack Overflow post, someone mentioned re-generating the HTML content -- which I did, and the line going upwards is getting triggered, though the rest of the animation.</p>
  
  <p>How do I make all my animations run in a loop with pure JavaScript/jQuery (no CSS3)?</p>
  
  <pre><code>var rocket = document.getElementById('shooting'),
  
      // Circles
      circle1 = document.getElementById('circle-1'),
      circle2 = document.getElementById('circle-2'),
      circle3 = document.getElementById('circle-3'),
      circle4 = document.getElementById('circle-4'),
  
      // Timer
      shootingTimer = null;
  
  // Listen for webkitAnimationEnd
  rocket.addEventListener("webkitAnimationEnd", animation_end_rocket);
  circle1.addEventListener("webkitAnimationEnd", animation_end_circle);
  circle2.addEventListener("webkitAnimationEnd", animation_end_circle);
  circle3.addEventListener("webkitAnimationEnd", animation_end_circle);
  circle4.addEventListener("webkitAnimationEnd", animation_end_circle);
  
  function animation_end_rocket() {
    $('#circle-1').css('display', 'block');
    $('#circle-1').css('animation', 'zoom1 0.1s 1');
  }
  
  function animation_end_circle1() {
    $('#circle-1').css('display', 'none');
    $('#circle-2').css('display', 'block');
    $('#circle-2').css('animation', 'zoom1 0.1s 1');
  }
  
  function animation_end_circle2() {
    $('#circle-2').css('display', 'none');
    $('#circle-3').css('display', 'block');
    $('#circle-3').css('animation', 'zoom1 0.1s 1');
  
  }
  
  function animation_end_circle3() {
    $('#circle-3').css('display', 'none');
    $('#circle-4').css('display', 'block');
    $('#circle-4').css('animation', 'zoom1 0.1s 1');
  
  }
  
  function animation_end_circle4() {
    $('#circle-4').css('display', 'none');
  }
  
  function shoot() {
  
      var container = document.getElementById('main'),
          content = container.innerHTML;
  
          container.innerHTML = content;
  
          $("#shooting").css("animation", 1000);
  }
  
  shootingTimer = = setInterval(shoot, 100);
  </code></pre>