title: JavaScript Event Firing But Not Updating DOM
body: <p>While trying to solve a problem for someone on StackOverflow (<a href="https://stackoverflow.com/questions/22208700/css3-animation-changing-words-to-infinity-without-rewind">specifically here</a>) I started playing around with JavaScript event listeners for CSS3 transitions. The HTML/CSS is simple, I setup a div containing 3 list items and let CSS rotate through them along with another div for placing new elements via javascript.</p>
  
  <p><a href="http://codepen.io/Crackerz/pen/liJLp" rel="nofollow noreferrer">Here is a link to the code itself</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="list"&gt;
      &lt;span class="element"&gt;item1&lt;/span&gt;
      &lt;span class="element"&gt;item2&lt;/span&gt;
      &lt;span class="element"&gt;item3&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div id="test"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.change {
    overflow: hidden;
    height: 58px;
    color: black;
    font-size: 3em;
  }
  
  .change span {
    position: relative;
    display: block;
    animation: myAnim 10s ease infinite 0s;
    -webkit-animation: myAnim 10s ease infinite 0s;
  }
  
  
  @keyframes myAnim {
    0% { top: 0px; }
    20% { top: 0px; }
    35% { top: -58px; }
    55% { top: -58px; }
    70% { top: -116px; }
    90% { top: -116px; }
    100% { top: 0px; }
  }
  </code></pre>
  
  <p>Something interesting happens with the JavaScript however. I have a single listener registered for <code>animationiteration</code> on my list, and the function called adds a single element to the test div. The issue is the elements appended to the list appear in groups of 3 after the animation resets back to 1! It appears as if the function has been called 3 times, but it only renders to the DOM every 3 calls. Why is this happening?</p>
  
  <p>JavaScript</p>
  
  <pre><code>function listener(e) {
    var list = document.getElementById("list");
    var child = document.createElement('div');
    child.innerHTML = "test";
    document.getElementById("test").appendChild(child);
  
  }
  
  var change = document.getElementById("list");
  change.addEventListener("animationiteration", listener, false);
  change.className = "change";
  console.log(change);
  </code></pre>
  
  <p>System information:</p>
  
  <pre><code>Firefox Version 27.0.1
  ArchLinux
  </code></pre>
  
  <p>Note that the demo only works in Firefox</p>
  
  <p><strong>Update 1</strong></p>
  
  <p>I put a breakpoint on line 40 of index.html (where the JavaScript resides) and I confirmed that <code>listener</code> is indeed called AFTER all 3 animations and is called 3 times at that point (one for each iteration). So now the question is, why does it behave like this?</p>