我有以下的CSS代码； 问题在于动画在我想要的方式下工作，但在10秒结束后重置，看起来很丑。理想情况下，我希望有一个无限动画，而不是重新启动，而是将图像包装起来，当图像的左侧超出画布时，从右侧回来。
@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;
}
我不知道如何在keyframes之外实现这个。
编辑：与此一起的html + tailwind代码。
<h1 class="font-bold text-center text-white">
<span class="onrir xs text-transparent bg-clip-text"> Who am I? </span>
</h1> 
您需要确保动画在相同的位置结束，就像开始时一样...
将
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; }