獨立於字體大小和列表項數量的CSS文本動畫

Question

我遇到了一個有趣的動畫，它循環顯示列表中的單詞，並且在任何給定時間僅顯示其中一個單詞。你可以在這裏看到原文：https://codepen.io/yoannhel/pen/sJpDj。

剝離一切都沒有關係，我們只剩下下面的HTML和CSS動畫：

.visible { 
 
     font-weight:600; 
 
     overflow:hidden; 
 
     height:40px; 
 
     padding:0 40px; 
 
    } 
 
    
 
    ul { 
 
     margin-top:0; 
 
     padding-left:110px; 
 
     text-align:left; 
 
     list-style:none; 
 
     -webkit-animation-name: change; 
 
     -webkit-animation-duration: 6s; 
 
     -webkit-animation-iteration-count: infinite; 
 
     animation-name: change; 
 
     animation-duration: 6s; 
 
     animation-iteration-count: infinite; 
 
    } 
 
    
 
    ul li { 
 
     line-height:40px; 
 
     margin:0; 
 
    } 
 
    
 
    @-webkit-keyframes change { 
 
     0%, 12%, 100% {transform:translateY(0);} 
 
     17%,29% {transform:translateY(-25%);} 
 
     34%,46% {transform:translateY(-50%);} 
 
     51%,63% {transform:translateY(-75%);} 
 
     68%,80% {transform:translateY(-50%);} 
 
     85%,97% {transform:translateY(-25%);} 
 
    } 
 
    
 
    @keyframes change { 
 
     0%, 12%, 100% {transform:translateY(0);} 
 
     17%,29% {transform:translateY(-25%);} 
 
     34%,46% {transform:translateY(-50%);} 
 
     51%,63% {transform:translateY(-75%);} 
 
     68%,80% {transform:translateY(-50%);} 
 
     85%,97% {transform:translateY(-25%);} 
 
    }

<div class='visible'> 
 
     <ul> 
 
      <li>world !</li> 
 
      <li>Bob !</li> 
 
      <li>users !</li> 
 
      <li>everybody !</li> 
 
      <li>Stack Overflow !</li> 
 
     </ul> 
 
    </div>

因爲在CSS最值是硬編碼，添加額外的項目例如，到ul列表已經打破了動畫（如上面的片段所示）。

我已經試過擺弄數值，但作爲初學者，我還沒有想出所有參數之間的相互關係。看起來改變字體大小需要改變.visible的高度和li元素的line-height;並且更改列表中項目的數量需要直接更改動畫change。

我想達到同樣的效果，但是與列表中的字體大小和項目數量無關（我並不擔心屏幕大小，儘管在窄屏幕上工作也很酷）。有沒有人有如何做到這一點的想法？

Answer 1

看this demo - 像素變體可能更清晰。

百分比在動畫是100％由6大致分爲（我們有6項）

Y偏移= -20px *項的數目（前兩個階段是零到具有延遲）

.frame { 
 
    overflow-y: hidden; 
 
    height: 20px; 
 
} 
 

 
.slot-machine { 
 
    animation: roll-up-out 6s ease 0s infinite alternate; 
 
    margin: 0px; 
 
} 
 
.slot-machine li { 
 
    height: 20px; 
 
} 
 

 
@keyframes roll-up-out { 
 
    0% { 
 
    transform: translateY(0px); 
 
    } 
 
    16% { 
 
    transform: translateY(0px); 
 
    } 
 
    32% { 
 
    transform: translateY(-20px); 
 
    } 
 
    48% { 
 
    transform: translateY(-40px); 
 
    } 
 
    64% { 
 
    transform: translateY(-60px); 
 
    } 
 
    80% { 
 
    transform: translateY(-80px); 
 
    } 
 
    100% { 
 
    transform: translateY(-100px); 
 
    } 
 
}

<div class="frame"> 
 
    <ul class="slot-machine"> 
 
    <li>aaa</li> 
 
    <li>bbb</li> 
 
    <li>ccc</li> 
 
    <li>ddd</li> 
 
    <li>eee</li> 
 
    <li>fff</li> 
 
    </ul> 
 
</div>