#sun.animate {
	animation-name: sunrise;
	animation-duration: 10s;
	animation-timing-function: ease;
	animation-iteration-count: 1;	
	animation-direction: normal;
	animation-delay: 0;
	animation-play-state: running;
	animation-fill-mode: forwards;
}

@keyframes sunrise {

	0% {
		bottom: 0;
		left: 340px;
		background: #f00;
	}
	
	33% {
		bottom: 340px;
		left: 340px;
		background: #ffd630;
	}

	66% {
		bottom: 340px;
		left: 40px;
		background: #ffd630;
	}

	100% {
		bottom: 0;
		left: 40px;
		background: #f00;
	}

}

#sky.animate {
	animation-name: sky;
	animation-duration: 10s;
	animation-timing-function: ease;
	animation-iteration-count: 1;	
	animation-direction: normal;
	animation-delay: 0;
	animation-play-state: running;
	animation-fill-mode: forwards;
}

@keyframes sky {

	0% {
		background-color: #525252;
	}
	
	33% {
		background-color: #6293e5;
	}

	66% {
		background-color: #6293e5;
	}

	100% {
		background-color: #525252;
	}

}

#ground.animate {
	animation-name: ground;
	animation-duration: 10s;
	animation-timing-function: ease;
	animation-iteration-count: 1;	
	animation-direction: normal;
	animation-delay: 0;
	animation-play-state: running;
	animation-fill-mode: forwards;
}

@keyframes ground {

	0% {
		background: #6c5228;
	}
	
	33% {
		background: #48a037;
	}

	66% {
		background: #48a037;
	}

	100% {
		background: #6c5228;
	}

}

#cloud.animate {
	animation-name: cloud;
	animation-duration: 12s;
	animation-timing-function: ease;
	animation-iteration-count: 1;	
	animation-direction: normal;
	animation-delay: 0;
	animation-play-state: running;
	animation-fill-mode: forwards;
}

@keyframes cloud {

	0% {
		opacity: 0;
		left: -100px;
	}
	
	50% {
		opacity: 1;
	}
	
	75% {
		opacity: 1;
		left: 100px;
	}
	
	100% {
		opacity: 0;
		left: 500px;
	}

}

#moon.animate {
	animation-name: moon;
	animation-duration: 10s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-delay: 0;
	animation-play-state: running;
	animation-fill-mode: forwards;
}

@keyframes moon {

	0% {
		opacity: 0;
		left: -100px;
	}
	
	50% {
		opacity: 0;
		left: -100px;
	}
	
	90% {
		opacity: 0;
		left: -100px;
	}
	
	100% {
		opacity: 1;
		left: 50px;
	}

}