Animate keyframes

http://www.impressivewebs.com/demo-files/css3-animated-scene/

by B L Praveen

HTML

<div id="sky" class="target">
<div id="cloud" class="target">
<div class="cloud cloud-1"></div>
<div class="cloud cloud-2"></div>
<div class="cloud cloud-3"></div>
</div>
<div id="sun" class="target"></div>
<div id="moon" class="target">
<div class="moon"> </div>
<div class="moon moon-2"> </div>
</div>
<div id="ground" class="target"></div>
</div>
<input id="startbutton" type="button" value="ANIMATE THE SCENE">

CSS

#sky {
    background-color: #525252;
    height: 500px;
    overflow: hidden;
    position: relative;
    width: 500px;
    z-index: 1;
}
#sky.animate {
    animation-direction: normal;
    animation-duration: 10s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-name: sky;
    animation-play-state: running;
    animation-timing-function: ease;
}
@-moz-keyframes sky {
0% {
    background-color: #525252;
}
33% {
    background-color: #6293E5;
}
66% {
    background-color: #6293E5;
}
100% {
    background-color: #525252;
}
}
@-moz-keyframes sky {
0% {
    background-color: #525252;
}
33% {
    background-color: #6293E5;
}
66% {
    background-color: #6293E5;
}
100% {
    background-color: #525252;
}
}
#ground {
    background: none repeat scroll 0 0 #6C5228;
    bottom: 0;
    height: 154px;
    left: 0;
    position: absolute;
    width: 500px;
    z-index: 4;
}
#ground.animate {
    animation-direction: normal;
    animation-duration: 10s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-name: ground;
    animation-play-state: running;
    animation-timing-function: ease;
}
@-moz-keyframes ground {
0% {
    background: none repeat scroll 0 0 #6C5228;
}
33% {
    background: none repeat scroll 0 0 #48A037;
}
66% {
    background: none repeat scroll 0 0 #48A037;
}
100% {
    background: none repeat scroll 0 0 #6C5228;
}
}
@-moz-keyframes ground {
0% {
    background: none repeat scroll 0 0 #6C5228;
}
33% {
    background: none repeat scroll 0 0 #48A037;
}
66% {
    background: none repeat scroll 0 0 #48A037;
}
100% {
    background: none repeat scroll 0 0 #6C5228;
}
}
#sun {
    background: none repeat scroll 0 0 #FFD630;
    border-radius: 70px;
    bottom: 0;
    height: 130px;
    left: 340px;
    position: absolute;
    width: 130px;
    z-index: 2;
}
#sun.animate {
    animation-direction: normal;
    animation-duration: 10s;
    animation-fill-mode: forwards;
    animation-iteration-count:...

JavaScript

$(function () {
	var s = null,

	AnimationSpace = {
		settings: {
			tabHeaders: null,
			tabSections: null,
			currentIndex: null,
			speed: 800,
			collection: null,
			i: null,
			j: null,
			startButton: $("#startbutton")
		},

		init: function () {
			s = this.settings;
			s.tabSections = $("div.tab");
			$(s.tabSections[0]).slideDown(s.speed);
			$(s.tabSections[1]).slideUp(s.speed);
			$(s.tabSections[2]).slideUp(s.speed);
			$(s.tabSections[3]).slideUp(s.speed);
			$(s.tabSections[4]).slideUp(s.speed);
			this.getClickedTab();
			this.startAnimation();
		},
	
		getClickedTab: function () {
			s = this.settings;
			s.tabHeaders = $("#sidebar_tabs ul.headers a");
			s.collection = $("#tab_content div.tab");
			$(s.tabHeaders).click(function () {
				s.currentIndex = $(this).parent().index();
				for (s.i = 0, s.j = s.collection.length; s.i < s.j; s.i += 1) {
					if (s.i !== s.currentIndex) {
						$(s.tabSections[s.i]).slideUp(s.speed);

					} else {
						$(s.tabSections[s.i]).slideDown(s.speed);
					}
				}
				return false;
			});
		},
		
		startAnimation: function () {
			s = this.settings;
			
			s.startButton.click(function() {
				$("div.target").toggleClass("animate");
				if (s.startButton.attr("value") === "ANIMATE THE SCENE") {
					s.startButton.attr("value", "RESET THE ANIMATION");
				} else {
					s.startButton.attr("value", "ANIMATE THE SCENE");	
				}
			});
		}

	};

	AnimationSpace.init();
});