"animationend" does not fire sometimes

Question

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 animationend (it's a modern Windows app so the browser is IE11 only). What I'm seeing is that sometimes 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.

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 MDN:

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.

UPDATE1: transitionend has nothing to do with animationend so this info is unrelated.

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.

UPDATE2: The current workaround that I'm using:

element.addEventListener("animationstart", function () {
    setTimeout(function () {
        // do stuff
    }, animationDuration);
});

Answer 1

Is it possible that your animations aren't ending?

Check the documentation for the animationcancel event:
https://developer.mozilla.org/en-US/docs/Web/Events/animationcancel

However, it looks like browser support may be spotty ("onanimationcancel" in HTMLElement.prototype returns false for me in Chrome 67).

It seems that using a setTimeout hack may be necessary for the time being.