How to Add the Best Fade Effect on Page Load?

If you are looking for a self-invoking transition fade effect then you should use CSS 3 Animations. You don't need to use any javascript or hard html markup to achieve that. Anyone can add the fade effect easily by using the following ticks.

##### Use the following css to add fade effect on page load.

body {
 
    -webkit-animation: fadein 2s; / Safari, Chrome and Opera > 12.1 /
       -moz-animation: fadein 2s; / Firefox < 16 /
        -ms-animation: fadein 2s; / Internet Explorer /
         -o-animation: fadein 2s; / Opera < 12.1 /
            animation: fadein 2s;
}
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/ Firefox < 16 /
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/ Safari, Chrome and Opera > 12.1 /
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/ Internet Explorer /
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

It will support all modern browsers and Internet Explorer 10 (and later).