http://jsfiddle.net/r4AFV/1/#update

by Ravindra Athreya

HTML

<div class="sun">
 <div class="dot"></div>
</div>
<div class="sun1">
 <div class="dot1"></div>
</div>

CSS

.dot, .dot1{
    position:absolute;

    width:15px;
    height:15px;
    border-radius:50%;
}

.dot{
     background:red;
         top:0;
    left:0;
}
.dot1{
     background:green;
         top:10;
    left:10;
}
.sun{
    width:200px;
    height:200px;
    position:absolute;
    -webkit-animation-iteration-count:1;
    -webkit-animation-timing-function:linear;
    -webkit-animation-name:orbit;
    -webkit-animation-duration:1s;
    -moz-animation-iteration-count:1;
    -moz-animation-timing-function:linear;
    -moz-animation-name:orbit;
    -moz-animation-duration:1s;
    top:50px;
    left:50px;
}

@-webkit-keyframes orbit { 
from { -webkit-transform:rotate(0deg) } 
to { -webkit-transform:rotate(1deg) } 
}
@-moz-keyframes orbit { 
from { -moz-transform:rotate(0deg) } 
to { -moz-transform:rotate(1deg) } 
}

.sun1{
    width:200px;
    height:200px;
    position:absolute;
    -webkit-animation-iteration-count:1;
    -webkit-animation-timing-function:linear;
    -webkit-animation-name:orbit1;
    -webkit-animation-duration:1s;
    -moz-animation-iteration-count:1;
    -moz-animation-timing-function:linear;
    -moz-animation-name:orbit1;
    -moz-animation-duration:1s;
    top:50px;
    left:50px;
}

@-webkit-keyframes orbit1 { 
from { -webkit-transform:rotate(1deg) } 
to { -webkit-transform:rotate(25deg) } 
}
@-moz-keyframes orbit1 { 
from { -moz-transform:rotate(1deg) } 
to { -moz-transform:rotate(25deg) } 
}