フォントサイズとリスト項目数から独立したCSSテキストアニメーション

Question

リスト内の単語をループし、いつでもそのうちの1つだけを表示する興味深いアニメーションが出てきました。オリジナルはここに表示されます：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、line-heightに変更する必要があります。リスト内の項目数を変更するには、アニメーションchangeを直接変更する必要があります。

私は同じ効果を達成したいと思いますが、フォントサイズとリスト内の項目の数には依存しません（画面サイズはそれほど心配していませんが、 ）。誰もそれを行う方法のアイデアを持っていますか？

Answer 1

をご覧ください。this demo - ピクセルのあるバリアントがより明確になる可能性があります。アニメーション

パーセントは、およそ6で割った100％（我々は6つのアイテムを持っている）である

YOFFSET = -20px *アイテムの数（最初の2つのステージがゼロの遅延を有することがある）

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