How To Create An Event When The Animation Ends?

1 - How to create an event when the animation ends? Animation written in css3 2 - How to Play the animation only when all data loaded in the browser ? You can see Many Thx. Demo

Solution 1:

1 -You need to add an animationEnd event listener

document.getElementById('animation-03').addEventListener('animationend', function () {
    alert('end')
}, false);

Make sure you add it for all browser vendors.

Here is a forked version: http://jsfiddle.net/Fj2vF/2/

2 - Do not worry about this. As the W3C specks say your animation will start only when everything is loaded.

Solution 2:

Initiating and then handling css3 animations with Javascript/jQuery is quite easy.

Check example here

You can use js library Move.js for it.