具有动态元素的CSS动画持续时间

Question

我为选取框效果创建了一个 css 动画。如果选取框列表中有 1 个元素或有 100 个元素，我希望动画速度相同。

我的 CSS 是:

.marquee {
    -webkit-animation-name: movement-smooth-up;
    animation-name: movement-smooth-up;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
}

@-webkit-keyframes movement-smooth-up {
  from {
    -webkit-transform: translateY(20%);
            transform: translateY(20%);
    top: 0%;
  }
  to {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
    top: 100%;
  }
}

我创建了一个演示 here

如您所见，当我有 10 个元素时，动画很快，而当我有 2 个元素时，动画很慢。

我怎样才能确保它们的速度相同？

谢谢!

Answer 1

您正在使用 2 个 DIV(两个 block )并且内容具有不同的大小。为了同时监视元素的输出，CSS 降低了 2 个“TEXT”的速率。做一个测试，在两边留下相同数量的“TEXT”，它们将以相同的速度运行，或者改变DIV的排列。

同样的速度:

<div class="marquee" style="float:left">
<div>TEXT</div>
<div>TEXT</div>
<div>TEXT</div>
<div>TEXT</div>
<div>TEXT</div>
<div>TEXT</div>
<div>TEXT</div>
<div>TEXT</div>
<div>TEXT</div>
<div>TEXT</div>
</div>

<div class="marquee" style="float:right">
<div>TEXT</div>
<div>TEXT</div>
<div>TEXT</div>
<div>TEXT</div>
<div>TEXT</div>
<div>TEXT</div>
<div>TEXT</div>
<div>TEXT</div>
<div>TEXT</div>
<div>TEXT</div>
</div>

或

.marquee {
-webkit-animation-name: movement-smooth-up;
animation-name: movement-smooth-up;
-webkit-animation-duration: 10s;
animation-duration: 10s;

height:180px;

}

或更改父元素的高度。

html, body {margin:0;padding:0;height:100%;}
.marquee {
-webkit-animation-name: movement-smooth-up;
animation-name: movement-smooth-up;
-webkit-animation-duration: 10s;
animation-duration: 10s;
height:100%;
}

Example...