CSS3的一个小问题,刚入门不太懂求解惑

<div class="box">
    <div class="cube1"></div>
    <div class="cube2"></div>
</div>


---------
.box {
width: 100px;
height: 100px;
position: relative;
margin: 100px auto;
animation:rotate 2s infinite linear;

}
@keyframes rotate {
100% {
transform:rotate(360deg);
}
}

.cube1, .cube2 {
width: 60%;
height: 60%;
position: absolute;
top: 0;
background: #0ff;
border-radius: 50%;
animation:load 2s infinite ease-in-out;
}
.cube2 {
top: auto;
bottom: 0;
animation-delay: -1s;
}
@keyframes load {
0%, 100% {
transform: scale(0);
}
50% {
transform: scale(1);
}
}

为什么下面这个top和buttom要这么设置,去掉的话就一个圈在转
.cube2 {
top: auto;
bottom: 0;
animation-delay: -1s;
}

A敏 我说: Amen

A敏 我说: Amen

不这样设置2个球轨迹一样，看起来就像一个球在动而已了

设置top，bottom是让2个球轨迹不一样