title: "animationend" does not fire sometimes
body: <p>I have a CSS animation that gets applied to a HTML element with a CSS class. I also have an event listener attached to the <code>animationend</code> (it's a modern Windows app so the browser is IE11 only). What I'm seeing is that <em>sometimes</em> the event gets fired and sometimes it doesn't. Regardless of the event firing I can always see it visually animating. It looks like some kind of race condition to me.</p>
  
  <p>I have searched the web trying to understand what could cause this event to not get fired but I haven't found any satisfying results. I found the following on <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions" rel="noreferrer">MDN</a>:</p>
  
  <blockquote>
    <p>Note: The transitionend event doesn't fire if the transition is aborted because the animating property's value is changed before the transition is completed.</p>
  </blockquote>
  
  <p><strong>UPDATE1:</strong> <code>transitionend</code> has nothing to do with <code>animationend</code> so this info is unrelated.</p>
  
  <p>I'm not sure if the same is applicable for CSS animations. Does anyone have any ideas as to what can cause this? If there was any event that could detect that an animation was aborted that could also be a useful workaround.</p>
  
  <p><strong>UPDATE2:</strong> The current workaround that I'm using:</p>
  
  <pre><code>element.addEventListener("animationstart", function () {
      setTimeout(function () {
          // do stuff
      }, animationDuration);
  });
  </code></pre>