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