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

.sliding-1 {    
  padding-bottom:8px;
  width:11ch;
  text-shadow:11ch 0 0;
  background:linear-gradient(currentColor 0 0) bottom right/0% 3px no-repeat;
  transition:0.5s linear,text-indent 0s;
}
.sliding-1:hover {  
  background-size:100% 3px;
  text-indent:-22ch;
  transition:0.5s linear;
 }
  
.sliding-2 {
  width:11ch;
  text-shadow:11ch 0 0;
  box-shadow:0 40px currentColor;
  clip-path:polygon(0 0,100% 0,100% 100%,100% 100%,0 100%);
  transform-origin:bottom left;
  transition:0.5s linear,text-indent 0s;
}
.sliding-2:hover {  
  text-indent:-22ch;
  clip-path:polygon(0 0,100% 0,100% 100%,calc(100% - 2px) calc(100% + 21.5px),0 100%); 
  transform:rotate(-6deg);
  transition:0.4s linear,text-indent 0.5s 0.3s linear;
 }
   
.sliding-3 {
  width:11ch;
  text-shadow:11ch 0 darkblue,22ch 0 red,33ch 0 gold,44ch 0;
  transition:0s;
}
.sliding-3:hover {  
  text-indent:calc(2*-44ch);
  transition:1s linear;
 }
 
.sliding-4 {
  width:11ch;
  text-shadow:11ch 0;
  transition:0.5s linear,text-indent 0s 0.5s;
}
.sliding-4:hover {  
  text-indent:-22ch;
  text-shadow:11ch 0 red;
  transition:0.5s linear,text-shadow 0s;
 }
  
.sliding-5 {
  width:11ch;
  text-shadow:11ch 0;
  transition:0.5s linear,text-indent 0s 0.5s,background-size 0s 0.5s;
  background:linear-gradient(#0000,#000) top right/0% 4000% no-repeat;
}
.sliding-5:hover {  
  text-indent:-22ch;
  text-shadow:11ch 0 #fff;
  background-size:100% 4000%;
  background-position:bottom right;
  transition:0.5s linear,text-shadow 0s,background-position 0s;
 }
    
.sliding-6 {
    height: 1.2em;
    white-space: nowrap;
    width:11ch;
    text-shadow: 0 -1.2em #fff,11ch -1.2em #000;
    line-height: var(--t, 1.2em);
    background: linear-gradient(currentColor 0 0) 0% 200%/100% 200% no-repeat;
    transition: 0s;
}
.sliding-6:hover {  
    background-position:0 100%;
    background-size:0% 200%;
    --t: 3.6em;
    text-indent:-22ch;
    transition: 0.4s linear,background-size 0.5s 0.4s linear,text-indent 0.5s 0.4s linear;
 }

.sliding-7 {
    height: 1.2em;
    white-space: nowrap;
    width:11ch;
    text-shadow: 0 -1.2em #000,11ch -1.2em #fff;
    line-height: var(--t, 1.2em);
    background: linear-gradient(currentColor 0 0) right/var(--d, 0) 100% no-repeat;
    transition: 0.4s linear,background-size 0.4s 0.4s linear,text-indent 0.4s 0.4s linear;
}
.sliding-7:hover {  
    --d: 100%;
    --t: 3.6em;
    text-indent:-22ch;
 }
/**/
[class] {
  font-family:monospace;
  overflow:hidden;
  display:inline-block;
  vertical-align: middle;
  font-size:40px;
  margin:25px;
  cursor:pointer;
}

body {
  text-align:center;
}