スムースCSSマーキー

Question

私はCSSマーキーを持っていて、うまく動作しますが、100％滑らかではありません。 以下のコードをよりスムーズに編集することはできますか？

私は別のアニメーションを試しました：マーキーX線形無限の速度、しかし運がありません。それがためにアニメーションでsetted長い時間である

<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秒の例200pxのために乗るべきであると設定した場合、小さなフレームレートがあるとして、それは滑らかでカント：JSでDあなたはマーキー幅に独立して速度を設定することができます

Answer 2

は、ID = "マーキーを追加"あなたの範囲に。 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();