How do I detect a transition end without a JavaScript library?

Question

I'd like to delete an object after it's done animating with a CSS transition, but I'm not able to use a JavaScript library.

How do I detect when the animation is done? Do I use a callback or custom event somehow?

Answer 1

element.addEventListener('transitionend', function(event) {
    alert("CSS Property completed: " + event.propertyName);
}, false );

For now, the exact event name has not been standardized. Here's a quote from MDN:

There is a single event that is fired when transitions complete.
In all standard-compliant browser, the event is transitionend,
in WebKit it is webkitTransitionEnd.

Here's the fiddle for Webkit: http://jsfiddle.net/bNgWY/