我想在一个框内水平无限滚动歌曲的标题。我重复了歌曲的标题，并隐藏了溢出的部分，所以它给人一种无限滚动的错觉，但结果真的很不稳定。
它应该像在汽车仪表板上一样，如果区域无法容纳整个文本，歌曲标题/艺术家就会循环。
[Codepen](https://codepen.io/safiajeff/pen/MWJQOPv)
如何使其更平滑/无限？
如果您已经有两个标题副本，您可以使用CSS而不是JS进行滚动。
这两个标题在同一行上一个接一个。如果将其容器向左变换50%，则第二个版本将位于左侧：0。然后第一个版本立即转到同一个地方，你看不到任何抖动。
这不仅相当简单，只添加了CSS关键帧定义，没有JS，而且CPU和GPU的使用都更轻，从而节省了用户的电池。
section{
overflow :hidden;
width: 150px;
display:inline-block;
border: 1px solid red;
height: 50px;
white-space: nowrap;
}
div{
width: 566px;
display: flex;
flex-wrap: nowrap;
animation: move 2s infinite linear; /* set the time to what you want of course */
}
@keyframes move {
to {
transform: translateX(-50%);
}
}
h1{
font-size: 20px;
margin:0;
padding-left:0px;
border: 1px solid blue;
width:283px;
}<section>
<div id="container">
<h1>Simon Dominic - At Night</h1>
<h1>Simon Dominic - At Night</h1>
</div>
</section><marquee>html标签就成功了！
文件在这里：
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee
编辑：对于那些抱怨贬低的人，然后在CSS中实现它。到目前为止，唯一放弃对marquee支持的是firefox，目前它在大多数浏览器上都能做到这一点，为什么要重新发明轮子呢？
<html>
<body>
<style style="text/css">
.marquee {
height: 50px;
overflow: hidden;
position: relative;
background: #fefefe;
color: #333;
border: 1px solid #4a4a4a;
}
.marquee p {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
-moz-animation: scroll-left 2s linear infinite;
-webkit-animation: scroll-left 2s linear infinite;
animation: scroll-left 20s linear infinite;
}
@-moz-keyframes scroll-left {
0% {
-moz-transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
}
}
@-webkit-keyframes scroll-left {
0% {
-webkit-transform: translateX(100%);
}
100% {
-webkit-transform: translateX(-100%);
}
}
@keyframes scroll-left {
0% {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
</style>
<div class="marquee">
<p> Marquee in CSS </p>
</div>
</body>
</html>
https://www.w3schools.in/css3/css-marquee/