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):
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:
See the CSS and HTML Part:
background: url(graph-images/graph-bg.png) no-repeat;
-webkit-transition: all 1s ease-out;
transition: all 1s ease-out;
background: url(graph-images/graph-bars-01.png) no-repeat;
-webkit-transition: all 2s ease-out;
transition: all 2s ease-out;
background: url(graph-images/graph-bars-02.png) no-repeat;
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
To try out yourself, here is the Download link: