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

Hover on me for a while
Events

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.

blog comments powered by Disqus

avenue-origin