Smooth css marquee

Question

我有一個CSS選框，它運行良好，但不是100％平滑。 我可以編輯下面的代碼來運行更流暢嗎？

我已經嘗試過不同的動畫：選框Xs線性無限速度，但沒有運氣。

<style> 
/* Make it a marquee */ 
.marquee { 
width: 100%; 
margin: 0 auto; 
white-space: nowrap; 
overflow: hidden; 
background-color: #000000; 
bottom: 0px; 
} 

.marquee span { 
display: inline-block; 
padding-left: 100%; 
text-indent: 0; 
animation: marquee 15s linear infinite; 
background-color: #000000; 
color: white; 
bottom: 0px; 
} 

/* Make it move */ 
@keyframes marquee { 
0% { transform: translate(0, 0); } 
100% { transform: translate(-100%, 0); } 
} 

/* Make it pretty */ 
.scroll { 
padding-left: 1.5em; 
position: fixed; 
font: 50px 'Verdana'; 
bottom: 0px; 
left: 0px; 
height: 10%; 
} 
</style> 

HTML

<p class="scroll marquee"><span id="scrolltext"></span></p> 

Answer 1

這是因爲在動畫設置好的很長一段時間。你需要改變時間來使它更平滑。但它也取決於選取框的寬度。我建議你使用JavaScript來做到這一點。

如果設置，它應在10秒騎例如200像素它不能是光滑的，因爲這裏提供小幀率：在JS d可以獨立地設定的速度上選取框寬度

Answer 2

增加號碼=「選取框「到你的跨度。從css中刪除動畫行並在代碼末尾添加以下javascript代碼：

var marqueePosition = 0; 
var speed = 10; //smaller number means faster movement 
var e = document.getElementById('marquee'); 
function moveMarquee() { 
    marqueePosition--; 
    if(marqueePosition < (-1*e.offsetWidth)) marqueePosition = 0; 
    e.style["-webkit-transform"] = "translate("+marqueePosition+"px, 0px)"; 
    e.style["-moz-transform"] = "translate("+marqueePosition+"px, 0px)"; 
    e.style["-ms-transform"] = "translate("+marqueePosition+"px, 0px)"; 
    e.style["-o-transform"] = "translate("+marqueePosition+"px, 0px)"; 
    e.style["transform"] = "translate("+marqueePosition+"px, 0px)"; 
    window.setTimeout(function() { 
     requestAnimationFrame(moveMarquee); 
    }, speed); 
} 
moveMarquee();