CSSスクロールの停止と繰返しの問題

Question

テキストを正しく整列またはスクロールできないため、何らかの理由で中スクロールを停止して最後のスクロールにジャンプしたい場合があります。

https://jsfiddle.net/s7hw8zzk/

<div class="content"> 
    <div class="visible"> 
    <ul> 
     <li>Welcome</li> 
     <li>Home</li> 
     <li>Family</li> 
     <li>Friends</li> 
     <li>Welcome</li>  
    </ul> 
    </div> 
</div> 

Answer 1

あなたline-heightでは50pxですので、あなたのキーフレームアニメーションではなく40ピクセルのは50pxの倍数に基づくべきです。

@keyframes change { 
    0% { 
    margin-top: 0; 
    } 
    23% { 
    margin-top: 0; 
    } 
    33% { 
    margin-top: -50px; 
    } 
    46% { 
    margin-top: -50px; 
    } 

    56% { 
    margin-top: -50px; 
    } 
    66% { 
    margin-top: -100px; 
    } 
    90% { 
    margin-top: -100px; 
    } 
    100% { 
    margin-top: -150px; 
    } 
}