Lauf gradient

HTML

<div id="grad">
 <p id="hopp1" style="position:relative;top:30px;">B</p>
  <p id="hopp2" style="position:relative;top:20px; background-position: -100%;">a</p>
 <p id="hopp3" style="position:relative;top:10px; background-position: -200%;">s</p> 
  <p id="hopp4" style="position:relative;top:0px; background-position: -300%;">t</p>
  <p id="hopp5" style="position:relative;top:-10px; background-position: -400%;">i</p>
  <p id="hopp6" style="position:relative;top:0px; background-position: -500%;">1</p>
  <p id="hopp7" style="position:relative;top:10px; background-position: -600%;">0</p>
   <p id="hopp8" style="position:relative;top:20px; background-position: -700%;">1</p>
   <p id="hopp9" style="position:relative;top:30px; background-position: -800%;">2</p>
  

</div>

CSS

p:after{
  content="";
 mix-blend-mode: multiply;
}



#grad p{
  display: inline-block;
 
   background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
   background-size: 800%;
 -webkit-background-clip: text;
 -webkit-text-fill-color:transparent;
 font-size:100px;
   animation: los 1s linear infinite;
}
@keyframes los{
0%{ background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
12,5%{ background-image: linear-gradient(to right, orange,yellow,green,blue,indigo,violet,red);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
25%{ background-image: linear-gradient(to right, yellow,green,blue,indigo,violet,red,orange);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}  
37,5%{ background-image: linear-gradient(to right, green,blue,indigo,violet,red,orange,yellow);-webkit-background-clip: text;-webkit-text-fill-color: transparent;} 
50%{ background-image: linear-gradient(to right,blue,indigo,violet,red, orange,yellow,green);-webkit-background-clip: text;-webkit-text-fill-color: transparent;} 
62,5%{ background-image: linear-gradient(to right,indigo,violet,red, orange,yellow,green,blue);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}  
75%{ background-image: linear-gradient(to right, violet,red,orange,yellow,green,blue,indigo);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}  
87,5%{ background-image: linear-gradient(to right, violet,red,orange,yellow,green,blue,indigo);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
100%{ background-image: linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
}