Kontinuierliche CSS-Animation

Question

Ich habe den folgenden CSS-Code. Das Problem besteht darin, dass die Animation so funktioniert, wie ich es möchte, aber nach Ablauf der 10 Sekunden zurückgesetzt wird, was 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. @keyframesscrollRight{0%{background-position-x:30%;}100%{background-position-x:130%;}}.onrir{backgroun

P粉852578075 · Answer

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

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

}


jumps

smooth