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.
$(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