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; }