Fade-in a Page or Element on Page Load
Fade in the contents of the page when it loads. This technique can be applied to a whole page or to a specific element within the page.
CSS
html {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 & 9 */
filter: alpha(opacity=0); /* newer IE */
-moz-opacity: 0; /* Older than Firefox 0.9 */
-khtml-opacity: 0; /* Safari 1.x (pre WebKit) */
opacity:0; /* (modern browsers) initially sets nothing displayed on page */
-webkit-transition: opacity 2s;
-moz-transition: opacity 2s;
-o-transition: opacity 2s;
-ms-transition: opacity 2s;
transition: opacity 2s;
}
Javascript
Turn Opacity on immediately after page has loaded. Place the this Javascript line at the bottom of the page, before the closing body tag (or place it in the head).
window.onload = function() { document.documentElement.style.opacity = '1'; }
Example
Just refresh the page to demonstrate the effect. This technique can be applied to an element within the page by simply changing the affected html element in the css and javascript.