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.

<style>
html {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	-khtml-opacity: 0;
	opacity:0;
	-webkit-transition: opacity 2s;
	-moz-transition: opacity 2s;
	-o-transition: opacity 2s;
	-ms-transition: opacity 2s;
	transition: opacity 2s;
}
</style>
</head>

<body>
<h1>Hello</h1>

<script>
window.onload = function() {
	document.documentElement.style.opacity = '1';
}
</script>

Example:

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.