CSS连续动画

Question

我有以下的CSS代码； 问题在于动画在我想要的方式下工作，但在10秒结束后重置，看起来很丑。理想情况下，我希望有一个无限动画，而不是重新启动，而是将图像包装起来，当图像的左侧超出画布时，从右侧回来。

@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;
}

我不知道如何在keyframes之外实现这个。

编辑：与此一起的html + tailwind代码。

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

Answer 1

您需要确保动画在相同的位置结束，就像开始时一样...

将100%更改为50%，并添加100%（与0%相同）。 （将动画持续时间乘以2，以适应原始持续时间）。
（未经测试（无法完全复制），但应该可以工作）

@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;
}

演示：（希望这是您所指的）

*{
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>