Graph animation

HTML

<div class="container">
    <a class="trigger" href="#">Start/Restart Animation</a>
    <div class="content">
        
        <div id="layerBall" class="ball">
            <a href="#"><small>500 Visit</small></a>
        </div>
        <div id="layerPulse" class="pulse"></div>
        <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>
    
    </div>
</div>

CSS

body {
    background: #161616 url(pattern_40.gif) top left repeat;
    margin: 0;
    padding: 0;
    font: 12px normal Verdana, Arial, Helvetica, sans-serif;
    height: 100%;
    color:#fff;
}

* {margin: 0; padding: 0; outline: none;}

img {border: none;}

a { 
    text-decoration:none; 
    color:#00c6ff;
}

h1 {
    font: 4em normal Arial, Helvetica, sans-serif;
    padding: 20px;    margin: 0;
    text-align:center;
    color:#bbb;
}

h1 small{
    font: 0.2em normal  Arial, Helvetica, sans-serif;
    text-transform:uppercase; letter-spacing: 0.2em; line-height: 5em;
    display: block;
}

h2 {
    font: 2em normal Arial, Helvetica, sans-serif;
    padding-bottom:30px;
    color:#fff;
    display:block;
}

.container {
    width: 960px;
    margin: 0 auto; 
    overflow: hidden;
}

.content {
    width:960px;
    height:300px;
    margin:0 30px;
    padding-top:450px;
    position:relative;
}

/* GRAPH */

.line, .line1, .line2, .line3 {
    background:#2187e7; 
    width:0px;
    height:1px;
}

.running .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;
}

.running .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;
}
.running .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;
}
.running .line3 {
    -moz-transform:rotate(48deg);
    -moz-transform-origin: 51em 39em;
    -moz-animation:move3 1s 3s linear forwards;
    
   ...

JavaScript

$(document).ready(function() {
    $('.content').removeClass('running');        

            $('.content').delay(10).queue(function(next){
                $(this).addClass('running');
                next();
            });


        
        $('.trigger').click(function() {
               $('.content').removeClass('running').delay(10).queue(function(next){
                $(this).addClass('running');
                next();
            });
            return false;
        });
});