<div class="color-1">1. Hover me </div>
<div class="color-2">2. Hover me </div>
<div class="color-3">3. Hover me </div>
<div class="color-4">4. Hover me </div>
<div class="color-5">5. Hover me </div>
<div class="color-6">6. Hover me </div>
<div class="color-7">7. Hover me </div>

.color-1 {
  background:repeating-linear-gradient(90deg,#000 0 calc(5%/11),#999 0 calc(10%/11)) left bottom/2000% 0% no-repeat;
  transition:0s;
}
.color-1:hover {  
  color:#fff;
  background-position:bottom right;
  background-size:2000% 100%;
  transition:10s steps(19),background-size 0s,color 0s;
 }
 
.color-2 {
  background:
    repeating-linear-gradient(90deg,
      red    0 calc(5%/11),
      blue   0 calc(10%/11),
      purple 0 calc(15%/11),
      orange 0 calc(20%/11),
      pink   0 calc(25%/11)
      ) 
      left bottom/2000% 0% no-repeat;
  transition:0s;
}
.color-2:hover {  
  color:#fff;
  background-position:bottom right;
  background-size:2000% 100%;
  transition:10s steps(19),background-size 0s,color 0s; 
 }
  
.color-3 {
  --w:11ch;
  letter-spacing: var(--w);
  width: var(--w);
  white-space: nowrap;
  text-shadow: 
    calc(-1*var(--w)) 0 0,
    calc(-2*var(--w)) 0 0,
    calc(-3*var(--w)) 0 0,
    calc(-4*var(--w)) 0 0,
    calc(-5*var(--w)) 0 0,
    calc(-6*var(--w)) 0 0,
    calc(-7*var(--w)) 0 0,
    calc(-8*var(--w)) 0 0,
    calc(-9*var(--w)) 0 0,
    calc(-10*var(--w)) 0 0;
 transition:0.5s;
}
.color-3:hover {  
  color:darkred;
  text-shadow: 
    calc(-1*var(--w)) 0 0 red,
    calc(-2*var(--w)) 0 0 blue,
    calc(-3*var(--w)) 0 0 green,
    calc(-4*var(--w)) 0 0 orange,
    calc(-5*var(--w)) 0 0 purple,
    calc(-6*var(--w)) 0 0 darkgray,
    calc(-7*var(--w)) 0 0 pink,
    calc(-8*var(--w)) 0 0 darkblue,
    calc(-9*var(--w)) 0 0 gold,
    calc(-10*var(--w)) 0 0 red;
 }

 .color-4 {
  background:
    repeating-linear-gradient(90deg,
      red  0 calc(5%/11),
      darkblue 0 calc(10%/11),
      purple 0 calc(15%/11),
      gold 0 calc(20%/11),
      green 0 calc(25%/11)
      ) 
      left bottom/2000% 100%;
  color:#000;
  -webkit-background-clip:text;
  background-clip:text;
  transition:0s;
}
.color-4:hover {  
  color:#0000;
  background-position:bottom right;
  transition:10s steps(19),color 0s; 
 }
  
.color-5 {    
  padding-bottom:8px;
  background:repeating-linear-gradient(90deg,
      #000  0 2.5%,
      red   0 5%,
      green 0 7.5%,
      blue  0 10%,
      gold  0 12.5%) left bottom/4000% 0px no-repeat;
  transition:0s;
}
.color-5:hover {  
  background-position:bottom right;
  background-size:4000% 3px;
  transition:15s steps(39),background-size 0s;
 }
    
.color-6 {
  width:11ch;
  text-shadow:
    11ch 0 red,
    22ch 0 blue,
    33ch 0 purple,
    44ch 0 gold,
    55ch 0 green,
    66ch 0 orange,
    77ch 0 pink,
    88ch 0 darkgray,
    99ch 0 lightblue,
    110ch 0 yellow,
    121ch 0;
  transition:0s;
}
.color-6:hover {  
  text-indent:calc(2*-121ch);
  transition:5s steps(11);
 }
  
.color-7 { 
  padding:8px;
  background:repeating-linear-gradient(90deg,#000 0 2.5%,red 0 5%,blue 0 7.5%,green 0 10%,purple 0 12.5%) left/4000% 0% no-repeat;
  transition:0s;
}
.color-7:hover {  
  background-position:right;
  background-size:4000% 100%;
  color:#fff;
  transition:15s steps(39),color 0s,background-size 0s;
 }
/**/
[class] {
  display:inline-block;
  font-family:monospace;
  overflow:hidden;
  vertical-align: middle;
  font-size:40px;
  margin:25px;
  cursor:pointer;
}

body {
  text-align:center;
}