CSS3 Graph Animation

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.

/* Control Layer Animation + Graph Point */
<div id="layerBall" class="ball">
  /* Tooltip */
  <a href="#"><small>100 Visit</small></a>
</div>  
/* Special Effect Only */
<div id="layerPulse" class="pulse"></div> 
/* Line joining the two points */
<div class="line"></div>

<div id="layerBall1" class="ball1">  
  <a href="#"><small>300 Visits</small></a>  
</div>  
<div id="layerPulse1" class="pulse1"></div>  
<div class="line1"></div>  

<div id="layerBall2" class="ball2">  
  <a href="#"><small>10 Visits</small></a>  
</div>  
<div id="layerPulse2" class="pulse2"></div>  
<div class="line2"></div>  

<div id="layerBall3" class="ball3">  
  <a href="#"><small>4251 Visits</small></a>  
</div>  
<div id="layerPulse3" class="pulse3"></div>  
<div class="line3"></div>  

<div id="layerBall4" class="ball4">  
  <a href="#"><small>1752 Visits</small></a>  
</div>  
<div id="layerPulse4" class="pulse4"></div>

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.

/* LINES STYLE with Rotate and Trasform-origin properties */
.line, .line1, .line2, .line3 {
    background: #2187e7;
    width: 0px;
    height: 1px;
}

.line {
    -moz-transform: rotate(-10deg);
    -moz-transform-origin: 0 -2em;
    -moz-animation: move 1s linear forwards;
    -webkit-transform: rotate(-10deg);
    -webkit-transform-origin: 0 -2em;
    -webkit-animation: move 1s linear forwards;
}

.line1 {
    -moz-transform: rotate(30deg);
    -moz-transform-origin: 14em 30em;
    -moz-animation: move1 1s 1s linear forwards;
    -webkit-transform: rotate(30deg);
    -webkit-transform-origin: 14em 30em;
    -webkit-animation: move1 1s 1s linear forwards;
}

.line2 {
    -moz-transform: rotate(-65deg);
    -moz-transform-origin: 20em -22em;
    -moz-animation: move2 1s 2s linear forwards;
    -webkit-transform: rotate(-65deg);
    -webkit-transform-origin: 20em -22em;
    -webkit-animation: move2 1s 2s linear forwards;
}

.line3 {
    -moz-transform: rotate(48deg);
    -moz-transform-origin: 51em 39em;
    -moz-animation: move3 1s 3s linear forwards;
    -webkit-transform: rotate(48deg);
    -webkit-transform-origin: 51em 39em;
    -webkit-animation: move3 1s 3s linear forwards;
}

Now is the time to style our attachment points, and also we set the special effect, for the position of the points we will see them later.

/* POINTS STYLE */

.ball, .ball1, .ball2, .ball3, .ball4 {
    background-color: #2187e7;
    background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff);
    background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff);
    width: 10px;
    height: 10px;
    border-radius: 50px;
    position: absolute;
    z-index: 99;
    -moz-transform: scale(0);
    -moz-animation: point 0.1s linear forwards;
    -webkit-transform: scale(0);
    -webkit-animation: point 0.1s linear forwards;
}

/* SPECIAL EFFECT STYLE */

.pulse, .pulse1, .pulse2, .pulse3, .pulse4 {
    width: 12px;
    height: 12px;
    border-radius: 30px;
    border: 1px solid #00c6ff;
    box-shadow: 0 0 5px #00c6ff;
    position: absolute;
    -moz-transform: scale(0);
    -moz-animation: pulse 1s ease-out;
    -webkit-transform: scale(0);
    -webkit-animation: pulse 1s ease-out;
}

CSS – Control Layer for the Delay

As you can see these layers are used to control the delay of the special effect and animation points.

/* CONTROL LAYER FOR THE DELAY */

#layerBall, #layerPulse {
    -moz-animation-delay: 0s;
    -webkit-animation-delay: 0s;
}

#layerBall1, #layerPulse1 {
    -moz-animation-delay: 0.9s;
    -webkit-animation-delay: 0.9s;
}

#layerBall2, #layerPulse2 {
    -moz-animation-delay: 1.9s;
    -webkit-animation-delay: 1.9s;
}

#layerBall3, #layerPulse3 {
    -moz-animation-delay: 2.9s;
    -webkit-animation-delay: 2.9s;
}

#layerBall4, #layerPulse4 {
    -moz-animation-delay: 4s;
    -webkit-animation-delay: 4s;
}

CSS – Tooltip

But here we see how he will act the tooltip on mouse over, and his style.

/* TOOLTIP */

.ball a, .ball1 a, .ball2 a, .ball3 a, .ball4 a {
    float: left;
    height: 10px;
    width: 10px;
    text-decoration: none;
    position: relative;
}

.ball a small, .ball1 a small, .ball2 a small, .ball3 a small, .ball4 a small {
    background: #000;
    text-align: center;
    width: 70px;
    padding: 5px;
    border-left: 1px solid #111;
    border-top: 1px solid #111;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    border-radius: 3px;
    display: none;
    color: #fff;
    font-size: 0.8em;
    text-indent: 0;
}

.ball a:hover small, .ball1 a:hover small, .ball2 a:hover small, .ball3 a:hover small, .ball4 a:hover small {
    display: block;
    position: absolute;
    top: 0px;
    left: 50%;
    margin: -40px;
    z-index: 9999;
    -moz-animation: tooltip .25s linear;
    -webkit-animation: tooltip .25s linear;
}

CSS – Coordinate Points

Here you set the position of coordinate point, help with Firebug. The same thing applies to the special effect, but as you will see is a few pixels less that will allow us to center the effect.

/* COORDINATE POINTS */

.ball {
    top: 445px;
    left: 0;
}

.ball1 {
    top: 411px;
    left: 196px;
}

.ball2 {
    top: 511px;
    left: 372px;
}

.ball3 {
    top: 151px;
    left: 544px;
}

.ball4 {
    top: 371px;
    left: 744px;
}

.pulse {
    top: 443px;
    left: -2px;
}

.pulse1 {
    top: 409px;
    left: 194px;
}

.pulse2 {
    top: 509px;
    left: 370px;
}

.pulse3 {
    top: 149px;
    left: 542px;
}

.pulse4 {
    top: 369px;
    left: 742px;
}

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.

/* ANIMATION LINES */

@-moz-keyframes move {
    0%   { width: 0px;
}

100% {
    width: 200px;
    box-shadow: 0px 0px 5px 1px rgba(0,198,255,0.5);
}
}

@-moz-keyframes move1 {
    0% {
        width: 0px;
    }

    100% {
        width: 200px;
        box-shadow: 0px 0px 5px 1px rgba(0,198,255,0.5);
    };
}

@-moz-keyframes move2 {
    0% {
        width: 0px;
    }

    100% {
        width: 400px;
        box-shadow: 0px 0px 5px 1px rgba(0,198,255,0.5);
    };
}

@-moz-keyframes move3 {
    0% {
        width: 0px;
    }

    100% {
        width: 300px;
        box-shadow: 0px 0px 5px 1px rgba(0,198,255,0.5);
    };
}

/* ANIMATION POINTS and SPECIAL FX */

@-moz-keyframes point {
    0%  {-moz-transform: scale(0,0);
}

100% {
    -moz-transform: scale(1,1);
}	
}

@-moz-keyframes pulse {
    0% {
        -moz-transform: scale(0);
        opacity: 0;
    }

    10% {
        -moz-transform: scale(1);
        opacity: 0.5;
    }

    50% {
        -moz-transform: scale(1.75);
        opacity: 0;
    }

    100% {
        -moz-transform: scale(0);
        opacity: 0;
    };
} 

/* ANIMATION TOOLTIP */

@-moz-keyframes tooltip {
    0%  { -moz-transform: scale(0,0);
    opacity: 0;
}

50% {
    -moz-transform: scale(1.2,1.2);
    opacity: 0.3;
}

75% {
    -moz-transform: scale(0.9,0.9);
    opacity: 0.7;
}

100% {
    -moz-transform: scale(1,1);
    opacity: 1;
}
}

/* ANIMATION LINES for Safari and Chrome */ 

@-webkit-keyframes move {
    0%   { width: 0px;
}

100% {
    width: 200px;
    box-shadow: 0px 0px 5px 1px rgba(0,198,255,0.5);
}
}

@-webkit-keyframes move1 {
    0% {
        width: 0px;
    }

    100% {
        width: 200px;
        box-shadow: 0px 0px 5px 1px rgba(0,198,255,0.5);
    };
}

@-webkit-keyframes move2 {
    0% {
        width: 0px;
    }

    100% {
        width: 400px;
        box-shadow: 0px 0px 5px 1px rgba(0,198,255,0.5);
    };
}

@-webkit-keyframes move3 {
    0% {
        width: 0px;
    }

    100% {
        width: 300px;
        box-shadow: 0px 0px 5px 1px rgba(0,198,255,0.5);
    };
}

/* ANIMATION POINTS + SPECIAL FX for Safari and Chrome */

@-webkit-keyframes point {
    0%  {-webkit-transform: scale(0,0);
}

100% {
    -webkit-transform: scale(1,1);
}	
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(0);
        opacity: 0;
    }

    10% {
        -webkit-transform: scale(1);
        opacity: 0.5;
    }

    50% {
        -webkit-transform: scale(1.75);
        opacity: 0;
    }

    100% {
        -webkit-transform: scale(0);
        opacity: 0;
    };
} 

/* ANIMATION TOOLTIP for Safari and Chrome */

@-webkit-keyframes tooltip {
    0%  { -webkit-transform: scale(0,0);
    opacity: 0;
}

50% {
    -webkit-transform: scale(1.2,1.2);
    opacity: 0.3;
}

75% {
    -webkit-transform: scale(0.9,0.9);
    opacity: 0.7;
}

100% {
    -webkit-transform: scale(1,1);
    opacity: 1;
}
}

Conclusion

I hope that this experiment / tutorial can help you better understand the world of CSS3.

October 8, 2011