Animation continue CSS

Question

J'ai le code CSS suivant ; Le problème est que l'animation fonctionne comme je le souhaite, mais se réinitialise une fois les 10 secondes écoulées et a l'air moche. Idéalement, j'aimerais avoir une animation infinie qui, au lieu de redémarrer, enveloppe l'image et lorsque le côté gauche de l'image sort du canevas, revient par la droite.

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

Je ne sais pas comment implémenter cela en dehors des images clés.

EDIT : code html + tailwind pour aller avec cela.

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

Answer 1

Vous devez vous assurer que l'animation se termine dans la même position qu'elle a commencé...

sera 100%更改为50%，并添加100%（与0% pareil). (Multipliez la durée de l'animation par 2 pour l'adapter à la durée d'origine).
(Non testé (ne peut pas reproduire exactement), mais devrait fonctionner)

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

Démo : (J'espère que c'est à cela que vous faites référence)

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