title: This animation flickers at the end in IE 11
body: <p>I have a banner that animates through a few background images.  The animations are defined in CSS and triggered from JavaScript using the <code>triggerAnimation()</code> function in <a href="http://jsfiddle.net/yHP9G/" rel="nofollow">this fiddle</a> and included below.  It works by animating the <code>next-banner</code> div on top of the <code>current-banner</code> div, and then updating the <code>current-banner</code> background to the new image after the animation finishes and resets.  The swap from the <code>next-banner</code> to the <code>current-banner</code> should be instantaneous, so that the user doesn't see it.</p>
  
  <p>This works fine in both Firefox and Chrome, but in IE 11 it will occasionally flicker at the end of the animation.  It resets back to the beginning state of the animation before the <code>animationend</code> callback makes the swap, causing a noticeable flicker from the new image to the old one, and then back.  It happens unpredictably, and doesn't even seem to be consistent in how <em>often</em> it happens.  Sometimes it will happen almost every time, while others I'll have to wait through 5 or more transitions before seeing it.</p>
  
  <p>There is evidence that it's caused by the <code>animationend</code> event firing late, because if I set a timeout to 50ms after the animation should have ended, and cancel that timeout in the <code>animationend</code> callback, then my timeout callback only executes when the flicker occurs, and doesn't execute when it behaves normally.</p>
  
  <p><code>triggerAnimation()</code> code:</p>
  
  <pre><code>window.triggerAnimation = function(element, animation, callback) {
      // omitted stuff to determine correct property and event names, which seems to work correctly
      element.style[propName] = animation;
      element.addEventListener(eventName, function(e) {
          element.style[propName] = "";
          element.removeEventListener(eventName, arguments.callee);
          if (callback) callback(e);
      }, false);
  };
  </code></pre>
  
  <p>Is this a problem with my code or with IE, and how can I prevent this from happening?</p>