css - 平滑的CSS字幕

我有一个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>

最佳答案

这是因为动画设置了很长时间。您需要更改时间以使其更流畅。但这也取决于选框的宽度。我建议您使用JavaScript来做到这一点。

如果您将其设置为在10秒内移动200像素，那么它就不会很平滑，因为JS中的帧率很小：D您可以根据选框宽度独立设置速度

关于css - 平滑的CSS字幕，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38071808/