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.

/* 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.

22 Comments

  1. This is really beautiful! Thank you for sharing this!

  2. 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 ;)

  3. Very cool. Definitely going to see how to use this myself. Thanks for sharing.

  4. Kimjinhyup

    thanks guy ! this is really awsome !

  5. Sathish

    Really nice!

  6. Fine work, thank you.

  7. That’s an amazing work

  8. Nitesh

    This is really excellent work

  9. Hossein

    Thank You !

  10. NICK

    AWESOME MAN!!! Enjoy seeing CSS work

  11. Wow, that is great. Very useful, Thanks for it.

  12. Angélica

    Esto es estupendo! Gracias!

  13. Complimenti per il tutorial, veramente bello e spiegato magistralmente. Alla prossima!

  14. ozer

    wonderful !

  15. hi…very nice, i would li to know if i can auto start the animation as the page loads and then redirect it to another page ?? i really need to know that

  16. magik092

    You make great think. Thanks for your sharing.

  17. afdi

    i like this one,…
    thanks for share, pal..

  18. kat1987

    Hey, thanks for it.
    I think it’s enough to set the origin to: transform-origin: left center;

  19. hi,

    Thanks for cool animation. This works charm.
    I have a doubt. Can we made this animated when we scroll top to bottom ?

    Thanks
    Ravikumar V.

Leave a Reply