我创建了一个动画，该动画应该将元素从页面的顶部移动到底部。我创建了 4 个对象并将动画应用于它们。令我惊讶的是，它们以不同的速度移动。我有点困惑。这是怎么回事？
body {
background-color: rgb(12, 12, 13)
}
#container {
width: 100%;
height: 100%;
}
.object {
background-color: rgb(255, 255, 255);
width: 3px;
height: 3px;
}
.slider {
animation: 10s linear infinite slide;
}
@keyframes slide {
from {
margin-top: 0%
}
to {
margin-top: 100%;
}
}<body>
<div id="container">
<div class="object slider"></div>
<div class="object slider" style="margin-left:30%"></div>
<div class="object slider" style="margin-left:60%"></div>
<div class="object slider" style="margin-left:90%"></div>
</div>https://jsfiddle.net/on6t18hy/1/
您的元素是块元素，因此它们只是彼此重叠，并且每个元素都在新行上。我们没有清楚地看到这一点，因为它们非常小，但如果你增加它们的大小，这将是微不足道的：
body {
background-color: rgb(12, 12, 13)
}
#container {
width: 100%;
height: 100%;
}
.object {
background-color: rgb(255, 255, 255);
width: 30px;
height: 30px;
}
.slider {
/*animation: 10s linear infinite slide;*/
}
@keyframes slide {
from {
margin-top: 0%
}
to {
margin-top: 100%;
}
}<body>
<div id="container">
<div class="object slider"></div>
<div class="object slider" style="margin-left:30%"></div>
<div class="object slider" style="margin-left:60%"></div>
<div class="object slider" style="margin-left:90%"></div>
</div>您可以清楚地看到每条线都在一条线上，增加第一行的边距顶部将推动其他线，依此类推。
仅将动画添加到第一个动画中，您将看到正在发生的事情。然后添加到其他人中，您将了解：
body {
background-color: rgb(12, 12, 13)
}
#container {
width: 100%;
height: 100%;
}
.object {
background-color: rgb(255, 255, 255);
width: 30px;
height: 30px;
}
.slider {
animation: 10s linear infinite slide;
}
@keyframes slide {
from {
margin-top: 0%
}
to {
margin-top: 100%;
}
}<body>
<div id="container">
<div class="object slider"></div>
<div class="object " style="margin-left:30%"></div>
<div class="object " style="margin-left:60%"></div>
<div class="object " style="margin-left:90%"></div>
</div>当您检查"容器"和每个"对象"时。您可以看到，边距正在相互倍增。所以第一个有"正常"边距，第二个有 2 倍"正常"，依此类推。 当你定位"对象"绝对时，它不会再发生。