OK so what I am trying to do is have 4 balls and rotate them equally.

What I can't figure out those is why there are only 3, and why they don't rotate equally. To better explain, here is my code in jsfiddle: <http://jsfiddle.net/XLgsK/1/>

```
.cube1, .cube2, .cube3, .cube4 {
    background-color: #89d858;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 10px;
    -webkit-animation: cubemove 1.8s infinite ease-in-out;
    animation: cubemove 1.8s infinite ease-in-out;
}
.cube2 {
    background-color: #408615;
    -webkit-animation-delay: 0.45s;
    animation-delay: 0.45;
}
.cube3 {
    background-color: #61a835;
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}
.cube4 {
    background-color: #aae485;
    -webkit-animation-delay: -1.35;
    animation-delay: -1.35s;
}

```

I thought that by setting them all an equal time apart in the animation it would work, however it hasn't. Any pointers?