How browsers render elements

This is a bit of mystery for me but fortunately there is some information out there, mainly the article “How browsers work” by Tali Garsiel.
I was a bit annoyed by the current Twentyfourteen WordPress Template that renders first some lines before getting towards the final layout. I am experimenting therefore with keyframe encapsulating as I did not find any better method.
To influence the rendering behaviour I put the whole page in a box like being described by graphicfusiondesign.com

<div class="box fade-in">look at me</div>

The CSS looks like

/* keyframes define start and the end state of our box */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
    opacity:0;  /* invisible upon start */
    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe, ease-in and repeat 1 time */
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
    -webkit-animation-fill-mode:forwards;  /* stay at last keyframe value */
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}