CSS transition between circles

Question

I have a series of circles that users can traverse using a Next and Back button. The process starts at the first step and progresses to the last step. When the users clicks the next button, the current circle decreases to its normal size and the next circle enlarges. I want to add an animation so that the current circle animates to it's normal size and the next circle animates to it's larger size. I also want to the current selected circle to have a border around it.

Here's an image:

And here's a start to a fiddle: http://jsfiddle.net/psivadasan/4Q4Z2/

HTML

<div id="circle-container">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle-selected"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>
<div>
    <div class="back">Back</div>
    <div class="next">Next</div>
</div>

CSS

.circle {
width: 50px;
height: 50px;
-moz-border-radius: 50%; 
-webkit-border-radius: 50%; 
border-radius: 50%;
background: #4679BD;
display: inline-block;
margin: 0 10px 20px 0;
}
.circle-selected {
    width: 70px;
    height: 70px;
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%;
    background: #4679BD;
    display: inline-block;
    margin: 0 10px 10px 0;
}
.back {float: left; margin: 0 20px 0 0;}
.next {float: left;}

JavaScript

$(".next").live('click', function() {
    $("#circle-container").find('.circle-selected').next().addClass("circle-selected");
});

Answer 1

For the circle border, just use a box-shadow:

.circle-selected {
    width: 70px;
    height: 70px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #4679BD;
    display: inline-block;
    margin: 0 10px 10px 0;
    box-shadow: 0 0 0 3px #000;        /* Added this */
}

As for the transition, just add it to the circle class:

.circle {
    width: 50px;
    height: 50px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #4679BD;
    display: inline-block;
    margin: 0 10px 20px 0;
    transition: all 2s;                /* Added these */
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
}

And to remove the class from the element when the next circle is selected, you would use the following:

$(".next").live('click', function() {
    $("#circle-container").find('.circle-selected').removeClass('circle-selected').next().addClass("circle-selected");
});

If you want to add the back functionality, you would simply use .prev() as opposed to .next():

$(".next").live('click', function() {
    $("#circle-container").find('.circle-selected').removeClass('circle-selected').next().addClass("circle-selected");
});
$(".back").live('click', function() {
    $("#circle-container").find('.circle-selected').removeClass('circle-selected').prev().addClass("circle-selected");
});

UPDATED EXAMPLE HERE