Make Site Elements FadeIn on Page While Loading

Now we can load elements of site’s layout using CSS transition effects and a small javascript code.

Just need to add this javascript in my theme .js file and some ID (#body) to the body tag:

/* add class .fadein to load elements with opacity change */
window.onload = function(){   
document.getElementById("body").setAttribute("class","loaded");
}

And then add this CSS:

.fadein {
        opacity: 0;
        transition: opacity 2s;
        -moz-transition: opacity 2s;
        -webkit-transition: opacity 2s;
        -o-transition: opacity 2s;
    }

 #body.loaded .fadein {
        opacity: 1;
 }

Now add class .fadein to the element you want to load with transition effect. The element will fade into layout.