html - CSS Webkit アニメーションが複数の要素で「スタック」する

Question

Webkit を使用していくつかのコメントに対してループ スクロール アニメーションを実行しようとしましたが、アニメーションを適用するたびに効果が「積み重なって」見え、コメント クラスの各要素が以前のアニメーションよりもわずかに速くなります。これが私のコードです：

CSS

.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;}

HTML (大まかにこのようになります。実際のコメントは PHP でエコーされます)

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

私のウェブサイトのコメントセクションのページの下部にある例を確認できます。