Kontinuierliche CSS-Animation

Question

Ich habe den folgenden CSS-Code; Das Problem ist, dass die Animation so funktioniert, wie ich es möchte, aber nach Ablauf der 10 Sekunden zurückgesetzt wird und hässlich aussieht. Idealerweise hätte ich gerne eine unendliche Animation, die das Bild nicht neu startet, sondern umhüllt und, wenn die linke Seite des Bildes aus der Leinwand verschwindet, von rechts zurückkommt.

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

Ich weiß nicht, wie ich das außerhalb von Keyframes umsetzen soll.

EDIT: HTML + Rückenwind-Code dazu.

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