Animationend event not firing on :after element

Question

I have an animation set on an :after element and a event handler on the animationend event. However, the animationend event never fires in IE10/IE11.

$(document).ready(function(){
    var testdiv = $('#testid');
    testdiv.on('animationend webkitAnimationEnd', function(){
        document.writeln('Animation has ended');
    });
});

JSFiddle: http://jsfiddle.net/Robin_f/R3qEG/

Sincerely hope someone can help me with this.

Answer 1

After searching the web it has become apparent that IE does not yet support the binding to animation events on a pseudo element. This is made more obvious by the jsFiddle I posted in my original post, which doesn't trigger the event when the animation ends.

Answer 2

It's because:

document.write is disallowed in JSFiddle envioriment and might break your fiddle.

You can use console.log() to debug instead:

$(document).ready(function(){
    var testdiv = $('#testid');
    testdiv.on('animationend webkitAnimationEnd', function(){
        console.log('Animation has ended');
    });
});

Updated Fiddle

or:

$(document).ready(function(){
    var testdiv = $('#testid');
    testdiv.on('animationend webkitAnimationEnd', function(){
        $('#testid').append('Animation has ended');
    });
});

Updated Fiddle

Answer 3

Looks like a bug in IE or maybe designed like this by DEV team, don't know. A workaround, really hacky, could be to set a fake animation on element to handle IE10/11:

#testid {
    animation: fakeAnim ease-in-out 1s 4 alternate;
}

@keyframes fakeAnim {    
    to {
        opacity: 1;
    }
}

NOTE: firefox will fire event twice, should filter it for Firefox to get logic fired only once.

Could be done using:

var isIE = !! navigator.userAgent.match(/Trident\/7\./);
$(document).ready(function () {
    var testdiv = $('#testid');
    testdiv.on('animationend webkitAnimationEnd', function (e) {
        if (!isIE && e.originalEvent.animationName === "fakeAnim") return;
        alert('Animation has ended');
    });
});

See DEMO jsFiddle