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

Question

我正在尝试使用 translateX 属性.

为水平移动的文本（跨度）设置无限关键帧动画

我设法让无限动画开始，但是当我到达动画的结尾时，它会“跳”回开头而不流畅。

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

我也尝试过为每个跨度创建不同的关键帧，但这种方法很难对速度进行计时。

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

我已经精简了内容以提供基本的连续滚动 - 'sentence'（跨度）的总宽度在此代码段中至少为 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>

注意：我删除了弯曲部分，因为我一直无法使它们很好地与滚动文本一起播放。也许有人可以帮我解决这个问题。

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

Smooth animation loop for horizontal text scroll

html

css

animation

keyframe

css-animations