Moving a div along a circular path using HTML/JavaScript/CSS

Question

I would like to move a circle along a circular path using HTML/CSS/JavaScript. Is there a way to achieve this? The code for circle is added below:

.circle {
    width: 50px;
    height: 50px;
    display: block;
    -webkit-border-radius: 50px;
     -khtml-border-radius: 50px;
       -moz-border-radius: 50px;
            border-radius: 50px;
    color: #fff;
    background-color: #b9c1de;
}

<div class="circle"></div>

Answer 1

It is Math time!

function circle(){
    var width = 10,
        height = 10,
        offsetX = 100,
        offsetY = 100,
        x = Math.cos(new Date()) * width + offsetX;   //Remember high school?
        y = Math.sin(new Date()) * height + offsetY;

    //Do whatever you want here with the coordinates.
    document.getElementsByClassName("circle")[0].style.left = x+"px";
    document.getElementsByClassName("circle")[0].style.top = y+"px";

    setTimeout(circle, 50);
}

Answer 2

You can achieve this with pure css3. Write like this:

CSS

.dot{
    position:absolute;
    top:0;
    left:0;
    width:50px;
    height:50px;
    background:red;
    border-radius:50%;
}
.sun{
    width:200px;
    height:200px;
    position:absolute;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-name:orbit;
    -webkit-animation-duration:5s;
    top:50px;
    left:50px;
}

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

HTML

<div class="sun">
 <div class="dot"></div>
</div>​

Check this http://jsfiddle.net/r4AFV/

UPDATED

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

Answer 3

Here's a pure JavaScript solution I threw together. Should have very good browser support (no CSS3 required). It's highly configurable. Make sure you look at the configuration options at the bottom of the JavaScript section. No library required.

http://jsfiddle.net/nN7ct/