CSS Scroll stoping and repeat issue

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是50像素，你的關鍵幀動畫，應根據50像素，而不是40像素的倍數。

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