カルーセルアニメーションと似たようなテキストアニメーション

Question

私は複製に興味がありますが、アニメーションがあまりにも遠すぎるアニメーションをcodepenで見つけました。私は同様の問題を抱えていたカルーセルを持っていました...

ul { 
    margin: 0; 
    padding: 0; 
} 

...固定しました。しかし、この例では、この例で使用されているもの以外のすべてに0の余白とパディングを追加しても、アニメーションが悪化します。

Fiddle

<div class='content'> 
    <div class='visible'> 
    <p> 
     Hello 
    </p> 
    <ul> 
     <li>world !</li> 
     <li>Bob !</li> 
     <li>users !</li> 
     <li>everybody !</li> 
    </ul> 
    </div> 
</div> 

Answer 1

あなたの最後の行が長すぎます。感嘆符は次の行に折り返されます。これにより、テキストコンテンツは5行になります。これは4行であるかのようにアニメーションされているため、各アニメーションステップは行の高さの1.25倍になります。

ul {white-space: nowrap;}を追加することをお勧めします。これにより、各行は強制的に1行になります。テキストが収まらない場合は、必要に応じてボックスの幅が広がります。

Updated fiddle