Lauf gradient

by basti1012

HTML

<div id="grad"><p>
Basti1012
</p>
</div>

CSS

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