Background transition

HTML

<div class="backgroundGradientDay"></div>
		<div class="backgroundGradientSunset"></div>
		<div class="backgroundGradientNight"></div>

CSS

/*Gradient used at daytime*/
 .backgroundGradientDay {
    height: 1000px;
    width: 110%;
    margin: -10px;
    position: fixed; top:0px; left: 0px; z-index: 2;
    background: -webkit-linear-gradient(#00DFFF, #002A6B); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#00DFFF, #002A6B); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#00DFFF, #002A6B); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#00DFFF, #002A6B); /* Standard syntax (must be last) */
    opacity: 1;
    transition: opacity 5s;
}

/*Gradient used in the evening*/
 .backgroundGradientSunset {
    height: 1000px;
    width: 110%;
    margin: -10px;
    position: fixed; top:0px; left: 0px; z-index: 1;
    background: -webkit-linear-gradient(#FF7900, #FF0000, #6B0000); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#FF7900, #FF0000, #6B0000); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#FF7900, #FF0000, #6B0000); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#FF7900, #FF0000, #6B0000); /* Standard syntax (must be last) */
    opacity: 1;
    visibility: none;
    transition: opacity 5s;
}

/*Gradient used at night*/
 .backgroundGradientNight {
    height: 1000px;
    width: 110%;
    margin: -10px;
    position: fixed; top:0px; left: 0px; z-index: 0;
    background: -webkit-linear-gradient(#00008F, #000019); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#00008F, #000019); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#00008F, #000019); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#00008F, #000019); /* Standard syntax (must be last) */
    opacity: 1;
    transition: opacity 5s;
}

.invisible {
	opacity: 0;
}

JavaScript

//This script only affects design (not data) of the page
$(document).ready(function(){
	//Makes the day class invisible, revealing the sunset class
	$(".backgroundGradientDay").addClass("invisible");
	//$(".backgroundGradientSunset").addClass("invisible");

});