Question

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

Answer 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.