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