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>

您可以在评论部分页面底部的my website处查看相关示例。

CSS webkit动画'堆叠'具有多个元素

0 个答案: