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

.shinning-1 {    
  background:
    linear-gradient(-45deg,#0000 33%,rgba(255,204,135,0.6),#0000 66%) right/300% 100% no-repeat
    #000;
  -webkit-background-clip:text;
  background-clip:text;
  transition:0.8s;
}
.shinning-1:hover {  
  background-position:left;
 }

.shinning-2 {    
  background:
    linear-gradient(0deg,#0000 33%,rgba(255,204,135,0.6) ,#0000 66%) bottom/100% 300% no-repeat
    #000;
  -webkit-background-clip:text;
  background-clip:text;
  transition:0.8s;
}
.shinning-2:hover {  
  background-position:top;
}

.shinning-3 {  
  background:
    linear-gradient(-45deg,#0000 33%,rgba(255,204,135,0.6),#0000 66%) right/300% 100% no-repeat
    #000;
  -webkit-background-clip:text;
  background-clip:text;
  transition:0s;
}
.shinning-3:hover {  
  background-position:left;
  transition:0.8s;
 }
 
.shinning-4 {    
  background:
    radial-gradient(farthest-side,#0000 ,rgba(255,204,135,0.6) calc(100% - 200px),#0000 ) center/0% 0% no-repeat
    #000;
  -webkit-background-clip:text;
  background-clip:text;
  transition:0.8s;
}
.shinning-4:hover {  
  background-size:1000px 1000px;
 }

.shinning-5 {   
  background:
    radial-gradient(farthest-side,#0000 ,rgba(255,204,135,0.6) calc(100% - 200px),#0000 ) center/0% 0% no-repeat
    #000;
  -webkit-background-clip:text;
  background-clip:text;
  transition:0s;
}
.shinning-5:hover {  
  background-size:1000px 1000px;
  transition:0.8s;
 }
 
.shinning-6 {    
  background:
    radial-gradient(farthest-side,rgba(255,204,135,0.6) calc(100% - 100px),#0000 ) center/0% 0% no-repeat
    #000;
  -webkit-background-clip:text;
  background-clip:text;
  transition:0.8s;
}
.shinning-6:hover {  
  background-size:400px 400px;
 }

/**/
[class] {
  font-weight: bold;
  color:#0000;
  display:inline-block;
  vertical-align: middle;
  font-size:40px;
  font-family:sans-serif;
  margin:25px;
  cursor:pointer;
}

body {
  text-align:center;
}