CSS3 Graph Animation

October 8, 2011

Hi guys, today I present a small experiment, using once again the CSS3 animations and properties.
This time we will build to create a chart, for me this is just an experiment to test the CSS3, I do not think you can use in your projects but you can enhance your knowledge.

I remember this animations are only visible in Firefox, Safari and Chrome.

Let’s start!

The Markup

HTML

In this experiment we will encounter several properties that return useful in future projects. First create a div where we set an ID (which will be useful later for the animation) and set the class “.ball, they will be our points in the graph.

Inside this div will put a tooltip that will allow us to mouse over to display a value, a number, a phrase or what one wants. Afterwards insert another div pulse that serves as a simple effect, and finally a div line that will be our line joining the points on the graph.

CSS

Well after creating our markup is the time to fill our CSS to give life to our experiment. We start by creating our lines, choose the color and height of the line, its width will be set in the animation as a parameter default is set to 0px.

As you will need to set the angle of the line and in this case we use the rotate property and also use the transform-orign property that will help move the line, i have helped with Firebug to find the right point of attachment.

CSS – Animations

As you can see here are listed all the animation of objects, lines, points, and finally the special effect tooltips. For the lines animate only width. As for the points and the special effect will usign the trasform:scale and opacity properties, same thing goes for the animation of the tooltip.

22 Comments

Looks great! I have relied on jQuery for most of my animations. I definitely need to get into the CSS method. I just subscribed and have been enjoying your tutorials. You are the first I have ever seen that actually follows a consistent style for each demo. Love that ;)