Animasi berterusan CSS

Question

Saya mempunyai kod CSS berikut; Masalahnya ialah animasi berfungsi seperti yang saya mahukan, tetapi ditetapkan semula selepas 10 saat tamat dan kelihatan hodoh. Sebaik-baiknya saya ingin mempunyai animasi tak terhingga yang, bukannya dimulakan semula, membungkus imej dan apabila bahagian kiri imej terkeluar dari kanvas, ia kembali dari kanan.

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

Saya tidak tahu bagaimana untuk melaksanakan perkara ini di luar bingkai utama.

EDIT: html + kod tailwind untuk menggunakan ini.

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

Answer 1

Anda perlu memastikan animasi berakhir dalam kedudukan yang sama seperti yang dimulakan...

akan menjadi 100%更改为50%，并添加100%（与0% yang sama). (Darabkan tempoh animasi dengan 2 agar sesuai dengan tempoh asal).
(Belum diuji (tidak boleh membiak dengan tepat), tetapi harus berkesan)

@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: (Semoga ini yang anda maksudkan)

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