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 n

Answer 1

@Mavericks solution works. But a much simpler solution that worked for me was:

CSS:

body {
   display: none;
}

JS:

(function() {
    $('body').css('display', 'block');
})();

or you can use show/hide. But, animation became buggy on IE10 and IE11. So, I changed the code to specifically for these browsers to:

CSS:

body {
   visibility: hidden;
}

JS:

(function() {
    $('body').css('visibility', 'visible');
})();

I also found this: https://css-tricks.com/transitions-only-after-page-load/

Maybe it might help someone.

Answer 2

$(window).load(function(){...})

works fine!

But use only when you want images to get loaded.

Answer 3

.bodyclass div{
    some animation css code
}

After body load just apply bodyclass to the body tag, then all the divs in the page will be animatable. This solution is efficient then @Husar said, because, we need to search only for the body element after the page load is complete but in other case, we need to change all the elements class name that needs to animated.

Answer 4

function atload() {dom_rdy()}window.onload=atload;

Paste it on the top of your js, and working with function dom_rdy() it will calls when dom is ready, without jQuery and others tons of code.

Answer 5

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

Answer 6

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>