Smooth animation loop for horizontal text scroll-CodePudding

I'm trying to have an infinite keyframe animation for text (span) moving horizontally by using the translateX property.

I manage to have the beginning of the infinite animation, however when I reach the end of the animation it "jumps" back to the beginning without it being smooth.

Also when reaching the last span of the animation, I would like that we start to see the beginning of the first span, so that it looks like it's indefinitely scrolling and not have blank space at the end of the animation.

I also tried to create different keyframes for each span, but this method made it very difficult to time the speed.

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 >
  <div >
    <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>

So how could I make it become smooth ?

This behavior happens in full screen, on small device, the problem doesn't seem to appear. If you run the code snippet, please expand it

CodePudding user response：

I have stripped things down to give a basic continuous scroll - with the overall width of the 'sentence' (span) being a minimum 100vw in this snippet.

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 >
  <div ><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>

Note: I removed the flexes as I have never been able to make them play nicely with scrolling text. Maybe someone can put me right on that.