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>