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

.infinite-1 {    
  padding-bottom:8px;
  background:repeating-linear-gradient(90deg,#0000 0 2.5%,currentColor 0 5%) left bottom/4000% 3px no-repeat;
  transition:0s;
}
.infinite-1:hover {  
  background-position:bottom right;
  transition:15s steps(39); /* 39 = 100/2.5 - 1 */
}
 
.infinite-2 {    
  padding-bottom:8px;
  background:
    repeating-linear-gradient(90deg,
       currentColor        0 0.833%,#0000 0 2.5%,
       #0000 0 3.333%,currentColor 0 4.1667% ,#0000 0 5%,
       #0000               0 6.6667% ,currentColor 0 7.5%) 
    left bottom/0% 3px no-repeat;
  transition:0s;
}
.infinite-2:hover {  
  background-position:bottom right;
  background-size:4000% 3px;
  transition:15s steps(39),background-size 0s; 
 }
  
.infinite-3{    
  padding-bottom:8px;
  background:
    repeating-linear-gradient(90deg,
       #0000 0 2.5%,
       #0000 0 3.5%  ,currentColor 0 4%    ,#0000 0 5%,
       #0000 0 5.75% ,currentColor 0 6.75% ,#0000 0 7.5%,
       #0000 0 8%    ,currentColor 0 9.5%  ,#0000 0 10%, 
       #0000 0 10.25%,currentColor 0 12.25%,#0000 0 12.5%, 
       currentColor 0 15%) left bottom/4000% 3px no-repeat;
  transition:0s;
}
.infinite-3:hover {  
  background-position:bottom right;
  transition:15s steps(39); /* 39 = 100/2.5 - 1 */
 }
 
.infinite-4 {    
  padding:8px;
  background:
    repeating-linear-gradient(180deg,#0000 0 7.5%,currentColor 0 10%                   ) top left    ,
    repeating-linear-gradient(-90deg,#0000 0 5%  ,currentColor 0 7.5%,#0000 0 10%) top right   ,
    repeating-linear-gradient(  0deg,#0000 0 2.5%,currentColor 0 5%  ,#0000 0 10%) bottom right,
    repeating-linear-gradient( 90deg,currentColor 0 2.5%,#0000 0 10%) bottom left ;                
  background-size:3px 4000%,4000% 3px;
  background-repeat:no-repeat;
  transition:0s;
}
.infinite-4:hover {  
  background-position:bottom left,top left,top right,bottom right;
  transition:15s steps(39); 
 }
 
.infinite-5 {    
  padding:8px;
  background:
    repeating-linear-gradient(180deg,#0000 0 2.5%,currentColor 0 5%  ,#0000 0 10%) top left    ,
    repeating-linear-gradient(-90deg,#0000 0 5%  ,currentColor 0 7.5%,#0000 0 10%) top right   ,
    repeating-linear-gradient(  0deg,#0000 0 7.5%,currentColor 0 10%                   ) bottom right,
    repeating-linear-gradient( 90deg,currentColor 0 2.5%,#0000 0 10%) bottom left ;
  background-size:3px 4000%,4000% 3px;
  background-repeat:no-repeat;
  transition:0s 9999s;
}
.infinite-5:hover {  
  background-position:bottom left,top left,top right,bottom right;
  transition:15s linear;
 }
  
.infinite-6 {    
  padding:8px;
  background:
    repeating-linear-gradient(  0deg,#0000 0 7.5%,currentColor 0 10%                   ) bottom left ,
    repeating-linear-gradient( 90deg,#0000 0 5%  ,currentColor 0 7.5%,#0000 0 10%) top left    ,
    repeating-linear-gradient(180deg,#0000 0 2.5%,currentColor 0 5%  ,#0000 0 10%) top right   ,
    repeating-linear-gradient(-90deg,currentColor 0 2.5%,#0000 0 10%) bottom right;
  background-size:3px 4000%,4000% 3px;
  background-repeat:no-repeat;
  transition:0s 9999s;
}
.infinite-6:hover {  
  background-position:top left,top right,bottom right,bottom left;
  transition:15s linear;
 }
 
/**/
[class] {
  display:inline-block;
  vertical-align: middle;
  font-size:40px;
  font-family:sans-serif;
  margin:25px;
  cursor:pointer;
}

body > [class]:nth-child(odd) {
  color:darkblue;
}
body {
  text-align:center;
}