CSS continuous animation

Question

I have the following CSS code; The problem is that the animation works the way I want it, but resets after the 10 seconds are up and looks ugly. Ideally I'd like to have an infinite animation that, instead of restarting, wraps the image and when the left side of the image goes out of the canvas, comes back from the right.

@keyframes scrollRight {
  0% {
    background-position-x: 30%;
  }
  
  100% {
    background-position-x: 130%;
  }
}

.onrir {
  background-image: url('./text.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-stroke: 0.8px #fff;
  font-size: 10rem;
  line-height: 100%;
  background-size: 120% 120%;
  background-position: 30% -30%;

  animation: scrollRight 10s infinite linear forwards;
}

I don't know how to implement this outside of keyframes.

EDIT: html tailwind code along with this.

<h1 class="font-bold text-center text-white">
        <span class="onrir xs text-transparent bg-clip-text"> Who am I? </span>
</h1>

Answer 1

You need to make sure the animation ends in the same position as it started...

Change 100% to 50% and add 100% (same as 0%). (Multiply the animation duration by 2 to fit the original duration).
(Untested (cannot reproduce exactly), but should work)

@keyframes scrollRight {
  
  0% {
    background-position-x: 30%;
  }
  50% {
    background-position-x: 130%;
  }
  100% {
    background-position-x: 30%;
  }
}

.onrir {
  background-image: url('./text.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-stroke: 0.8px #fff;
  font-size: 10rem;
  line-height: 100%;
  background-size: 120% 120%;
  background-position: 30% -30%;

  animation: scrollRight 20s infinite linear forwards;
}

Demo: (Hope this is what you are referring to)

*{
padding:0;
margin:0;
}

.smooth,.jumps{
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    font-size: 2rem;
    text-align: center;
}
.jumps{
    animation: jumps 2s infinite;
}
.smooth{
    animation: smooth 4s infinite;
}

@keyframes jumps{
  0%{
    left: 0px;
  }
  100%{
    left: 200px;
  }
}
@keyframes smooth{
  0%{
    left: 0px;
  }
  50%{
    left: 200px;
  }
  100%{
    left: 0px;
  }
}
.canvas{
  position: absolute;
  left: 100px;
  width:100px;
  height:250px;
  background: lightgray;
  opacity: 0.5;
    z-index: 1;

}

<div class="canvas"></div>
<div class="jumps">jumps</div>
<div style="height:50px"></div>
<div class="smooth">smooth</div>