[ACCEPTED]-start css3 animation after entire page load-css

Accepted answer

Score: 23

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

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

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

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

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

Something 1 like this

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

Score: 2

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

Score: 1

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

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

Score: 1

.bodyclass div{
    some animation css code
}

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

Score: 0

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

works fine!

But use only when you want images 1 to get loaded.

Score: 0

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

CSS:

body {
   display: none;
}

JS:

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

or 5 you can use show/hide. But, animation became 4 buggy on IE10 and IE11. So, I changed the 3 code to specifically for these browsers 2 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 1 help someone.

Source: stackoverflow.com

[ACCEPTED]-start css3 animation after entire page load-css

Cross-Browser CSS3 Keyframe Animation Firefox

Pause/resume CSS animations when switching tabs

Chrome css3 mix blend mode bug in chrome

How to use fade-in text/image on page is loaded

How to distort an image to create flag waving in the wind effect using html5 canvas

Webkit animation is leaving junk pixels behind on the screen

Apply CSS transition when element comes into viewport

CSS3 disappears after keyframe animation

How to animate handwriting text on the web page using SVG?

CSS animation bug in Safari