水平文本滚动的平滑动画循环

Question

我正在尝试使用translateX属性为水平移动的文本(span(创建一个无限关键帧动画。

我设法有了无限动画的开始，然而当我到达动画的结尾时；跳跃"；回到开头却不顺利。

此外，当到达动画的最后一个跨度时，我希望我们开始看到第一个跨度的开始，这样它看起来就像是在无限期滚动，并且在动画结束时没有空格。

我还尝试为每个跨度创建不同的关键帧，但这种方法使速度计时变得非常困难。

html, body {
margin: 0;
}
.scroll {
display: flex;
position: relative;
width: 100%;
height: 15%;
min-height: 150px;
margin: auto;
background-color: #252525;
overflow: hidden;
z-index: 1;
}
.m-scroll {
display: flex;
position: absolute;
top: 0;
left: 0;
align-items: center;
justify-content: flex-start;
width: 100%;
height: 100%;
white-space: nowrap;
transform: scale(2);
transition: all 1s ease;
}
.m-scroll > div {
display: flex;
animation: scrollText 10s infinite linear;
}
.m-scroll h1 {
margin: 0;
margin-right: 150px;
font-size: 25px;
color: #ffffff;
transition: all 2s ease;
}
@keyframes scrollText {
from {
transform: translateX(0%);
}
to {
transform: translateX(-50%);
}
}

<div class="scroll">
<div class="m-scroll">
<div>
<h1>
<span>TEXT </span><span>INFINITE </span><span>SCROLL</span>
</h1>
<h1>
<span>TEXT </span><span>INFINITE </span><span>SCROLL</span>
</h1>
<h1>
<span>TEXT </span><span>INFINITE </span><span>SCROLL</span>
</h1>
<h1>
<span>TEXT </span><span>INFINITE </span><span>SCROLL</span>
</h1>
</div>
</div>
</div>

那么我怎样才能让它变得光滑呢？

这种行为发生在全屏中，在小型设备上，问题似乎没有出现。如果您运行代码片段，请将其展开

Answer 1

我已经将内容分解为一个基本的连续滚动-在这个片段中，"句子"(span(的总宽度至少为100vw。

html,
body {
margin: 0;
}
.scroll {
position: relative;
width: 100vw;
height: 15%;
min-height: 150px;
background-color: #252525;
overflow: hidden;
z-index: 1;
margin: 0;
padding: 0;
}
.m-scroll {
overflow_ hidden;
height: 100%;
white-space: nowrap;
animation: scrollText 10s infinite linear;
margin: 0;
font-size: 0;
display: inline-block;
}
span {
font-size: 50px;
display: inline-block;
min-width: 100vw;
margin: 0;
padding: 0;
color: white;
}
@keyframes scrollText {
from {
transform: translateX(0%);
}
to {
transform: translateX(-50%);
}
}

<div class="scroll">
<div class="m-scroll"><span style="rbackground: cyan;">TEXT INFINITE SCROLL </span><span style="rbackground: magenta;">TEXT INFINITE SCROLL </span><span style="rbackground: yellow;">TEXT INFINITE SCROLL </span><span style="rbackground: gray;">TEXT INFINITE SCROLL </span></div>
</div>

注意：我删除了flex，因为我从来没能让它们很好地播放滚动文本。也许有人能纠正我的错误。