Html CSS网络工具包动画'；堆叠'；多元

我一直在尝试使用webkit为一些评论制作循环滚动动画，但是每当我应用动画时，效果似乎会“叠加”，并且comment类的每个元素都会比之前的动画稍微快一些。这是我的密码：

CSS

HTML（大致如下，实际注释与PHP相互呼应）

1
2
三
4

您可以在页面底部的“评论”部分查看它的示例

.comment {
content:'';
-webkit-animation: movecomments 18s linear infinite;
-moz-animation: movecomments 18s linear infinite;
-o-animation: movecomments 18s linear infinite;
}
@-webkit-keyframes movecomments {
    0% {margin-top: 500px;}
    100% {margin-top: 0px;}
}
@-moz-keyframes movecomments {
    0% {margin-top: 500px;}
    100% {margin-top: 0px;}
}
@-o-keyframes movecomments {
    0% {margin-top: 500px;}
    100% {margin-top: 0px;}

<div class="comment">1</div>
<div class="comment">2</div>
<div class="comment">3</div>
<div class="comment">4</div>