CSS Scroll stoping und Problem wiederholen

Question

Ich kann nicht den Text richtig ausrichten oder scrollen, aus irgendeinem Grund möchte es Mitte scroll stoppen und es springt auf die letzte.

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

Da Ihr line-height ist 50px, sollten Sie Ihre Keyframe-Animation auf ein Vielfaches von 50px 40px statt basieren.

@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; 
    } 
}