Callbacks for Animations

How do you know when an CSS animation has started or finished? There are events fired to help you keep track.

This animation has an iteration count of 2 and a length of 1s. Note that while start always fires, the others are dependant on how long the animation runs.

Simplified Javascript with jQuery

$(function(){
	$("#blue_box").on('animationstart webkitanimationStart', function(e){
		alert(e.originalEvent.animationName);
		alert(e.originalEvent.elapsedTime + 's');
	});
	$("#blue_box").on('animationend webkitanimationEnd', function(e){
		alert(e.originalEvent.animationName);
		alert(e.originalEvent.elapsedTime + 's');
	});
	$("#blue_box").on('animationiteration webkitanimationIteration', function(e){
		alert(e.originalEvent.animationName);
		alert(e.originalEvent.elapsedTime + 's');
	});
});

Comments/Questions?

Please add any questions/corrections/extra info below. Please be courteous to other users.