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 jsFiddle

回答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.

回答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.