带有4个对象的CSS3旋转动画

Question

好吧，所以我想要做的是有4个球并将它们同等旋转。

我无法弄清楚这就是为什么只有3个，为什么它们不能平等地旋转。为了更好地解释，这里是我的代码中的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; 
} 

我认为，通过在动画中除了所有的相等的时间将它们设置它会工作，但它没有。任何指针？

Answer 1

你缺少的csscube1

.cube1 { 
    background-color: #408615; 
    -webkit-animation-delay: 0.20s; 
    animation-delay: 0.20; 
} 

我试过了，我现在可以看到4圈。

Answer 2

修正： http://jsfiddle.net/XLgsK/2/

1个旋转的总时间是1.8秒。 1.8/4 = 0.45，因此黄色球（立方体4）需要延迟-1.35秒，因此它开始距离之前的位置1.35s。

cube1, .cube2, .cube3, .cube4 { 
    background-color: red; 
    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: green; 
    -webkit-animation-delay: -0.45s; 
    animation-delay: -0.45; 
} 
.cube3 { 
    background-color: orange; 
    -webkit-animation-delay: -0.9s; 
    animation-delay: -0.9s; 
} 
.cube4 { 
    background-color: yellow; 
    -webkit-animation-delay: -1.35s; 
    animation-delay: -1.35s; 
}