In this tutorial we are going to see how to do a Graph Bar Animation using pure CSS3, no JavaScript used in this tutorial. Its very simple if you already good at CSS techniques.

Because we have used CSS3 in here, this script works only in Modern Browsers, especially If you are going to use IE then use IE10.

See the demo below: (Mouse over on the graph to see the animation):

We are not using JavaScript here, So the only way to trigger the Animation is to hover on it.

To make this animation effect very simple, I have used only images. Those bars its looks like animating is actually a full background image.

There are totally three layers (DIVs), holding three background images:

Images are:

1. graph-bg.png
2. graph-bars-01.png
3. graph-bars-02.png
See the CSS and HTML Part:

CSS:

.cover{
	position: absolute;
	z-index: 12;
	background: url(graph-images/graph-bg.png) no-repeat;
	width: 446px;
	height: 251px;
	-webkit-transition: all 1s ease-out;
	transition: all 1s ease-out;	
}
.graph_bars_01{
	position: absolute;
	z-index: 11;
	background: url(graph-images/graph-bars-01.png) no-repeat;
	width: 446px;
	height: 251px;
	-webkit-transition: all 2s ease-out;
	transition: all 2s ease-out;	
}
.graph_bars_02{
	position: absolute;
	z-index: 10;
	background: url(graph-images/graph-bars-02.png) no-repeat;
	width: 446px;
	height: 251px;
}
#parent:hover .cover{
    height: 0px;
}

#parent:hover .graph_bars_01{
    height: 0px;
}

 HTML:

<div id="parent">
	<div class="cover"></div>	
	<div class="graph_bars_01"></div>
	<div class="graph_bars_02"></div>
</div>

These backgrounds are controlled by z-index. And the animation is controlled by CSS3 Transitions: (transition: all 2s ease-out) . There is a one second time difference between the 1st DIV and the 2nd DIV.

So the Animation is nothing but reducing the height of the DIVs.

If you see the above CSS classes (.cover and .graph_bars_02) height is defined. (height : 251px;). When height is removed from the DIVs (ie., height: 0px), the transition effect will start work.

To do that here we have used :hover 

#parent:hover .cover{
    height: 0px;
}

#parent:hover .graph_bars_01{
    height: 0px;
}

If you want to animate the Graph OnLoad of the Webpage. You have to use jQuery / JavaScript to trigger this effect.

To try out yourself,  here is the Download link: