Does Css3 keyframe animations start after document is ready loaded?

Question

Does Css3 keyframe animations start after every element in the document is loaded? This is a vital question because it would be a problem if an animation started before the whole page had been properly loaded.

Answer 1

The animation starts as long as the CSS rule is available (loaded from external stylesheet or found in <style> block on the page) and there are elements on the page matching the selectors. "Waiting for page to load" cannot be done using CSS only. You should use JavaScript to detect the document load event - then attach the class containing the animation to the proper elements.

Example using jQuery (can also be done using pure JS):

<script>
    $(document).ready(function(){
        $('#elementToAnimate').addClass('myAnimationClass');
    });
</script>

Answer 2

Also when the display property changes from none to visible. Sample Code

function showDiv() {

document.getElementById("myDiv").style.display="block"; }