Animasi berterusan CSS

Question

Saya mempunyai kod CSS berikut, masalahnya ialah animasi berfungsi seperti yang saya mahu, tetapi ditetapkan semula selepas 10 saat tamat, yang 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. @keyframesscrollRight{0%{background-position-x:30%;}100%{background-position-x:130%;}}.onrir{backgroun

P粉852578075 · Answer

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;

}


jumps

smooth