Smooth css Zelt

Question

Ich habe ein CSS-Laufschrift, und es läuft gut, aber ist nicht 100% glatt. Kann ich den folgenden Code bearbeiten, damit er reibungsloser abläuft?

Ich habe verschiedene Animation ausprobiert: Laufschrift Xs lineare unendliche Geschwindigkeiten, aber kein Glück.

<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

ist es wegen einer langen Zeit in der Animation setted. Sie müssen die Zeit ändern, um sie glatter zu machen. aber es hängt auch von der Breite des Zeltes ab. Ich schlage vor, Sie verwenden das Javascript, um dies zu tun.

, wenn Sie festgelegt, dass es zum Beispiel 200 Pixel in 10 Sekunden fahren sollte es glatt sein kann nicht, da es eine kleine Framerate ist: D in JS Sie die Geschwindigkeit unabhängig von der Marquee-Breite einstellen

Answer 2

id = "Marquee add "zu deiner Spannweite. entfernen Sie die Animationslinie von css und fügen Sie dieses Javascript am Ende Ihres Codes hinzu:

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();