Function to attach a callback to the end of the current/next CSS animation. Useful when dealing with chained animations.

onceAnimationFinished.js

function getPrefixedEvents (str) {
    var prefixes = [ '', 'webkit', 'o', 'MS', 'moz' ],
        out = [],
        i, prefix, cur;

    for (i = 0; i < prefixes.length; i += 1) {
        prefix = prefixes[i];
        cur = prefix + str;

        if (prefix.length < 2) {
            cur = cur.toLowerCase();
        }
        out.push(cur);
    }

    return out;
}

function onceAnimationFinished (element, callback) {
    var events = getPrefixedEvents('AnimationEnd');

    function getListener (i) {
        return function listener () {
            console.log()
            element.removeEventListener(events[i], listener, false);
            callback();
        };
    }

    for (var i = 0; i < events.length; i += 1) {
        element.addEventListener(events[i], getListener(i), false);
    }
}

usageExample.js

var el = document.getElementById('foo');

onceAnimationFinished(el, function () {
    // [..]
});