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（两个块），并且内容具有不同的大小。为了同时监视元素的输出，CSS降低了2个“文本”的比率。做一个测试，在两边保留相同数量的“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> 

OR

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