start css3 animation after entire page load

Question

Anyone know how to start a css3 animation after the rest of the page loads completely (images and everything)?

I am using a delay right now to mimic it but this is not what I'm looking for.

Thanks

Peter

Answer 1

That is beyond the scope of CSS, but it is quite simple to do with JQuery

$(document).ready(function() {/*You code here*/ }

Or read more about it here => http://api.jquery.com/ready/

Place your animation code in a class, lets say .animation

Then call that class on the element you wish to animate using JQuery .addclass() (http://api.jquery.com/addClass/)

Something like this

   <script type="text/javascript">
    $(document).ready(function() {
    $("#element-to-animate").addClass("animation"); 
    });
   </script>

Answer 2

   div
    {
    -webkit-animation-delay: 5s; 
     animation-delay: 5s;
    }