<div class="buggy-1">1. Hover me </div>
<div class="buggy-2">2. Hover me </div>
<div class="buggy-3">3. Hover me </div>
<div class="buggy-4">4. Hover me </div>
<div class="buggy-5">5. Hover me </div>
<div class="buggy-6">6. Hover me </div>
.buggy-1 {
  position: relative;
  width: 11ch;
  white-space: nowrap;
    text-indent: 0px;
    left:0px;
    bottom:0px;
    top:0px; 
}
 .buggy-1:hover {
    text-indent: 0.1px;
    left:0.1px;
    transform: translateY(0.1px);
    top:0.1px;
   transition: 
                0.2s     ,
      left      0.2s 0.2s,
      top       0.2s 0.4s,
      transform 0.2s 0.6s;
  transition-timing-function: cubic-bezier(0.5,-300,0.5,300);
 }

.buggy-2 {
  --w:11ch;
  --x:0px;
  letter-spacing: var(--w);
  width: var(--w);
  white-space: nowrap;
  text-shadow: 
    calc(-1*var(--w)) var(--x) 0,
    calc(-2*var(--w)) 0 0,
    calc(-3*var(--w)) var(--x) 0,
    calc(-4*var(--w)) 0 0,
    calc(-5*var(--w)) var(--x) 0,
    calc(-6*var(--w)) 0 0,
    calc(-7*var(--w)) var(--x) 0,
    calc(-8*var(--w)) 0 0,
    calc(-9*var(--w)) var(--x) 0,
    calc(-10*var(--w)) 0 0;
 }
.buggy-2:hover {
   --x:0.1px;
   transition: 0.3s  cubic-bezier(0.5,-200,0.5,200);

 }

  div.buggy-3 {
  --w:11ch;
  width: var(--w);
  white-space: nowrap;
  text-shadow: 
    calc(1*var(--w)) 2px 0,
    calc(2*var(--w) + 2px) -3px 0,
    calc(3*var(--w) - 3px) 5px 0,
    calc(4*var(--w)) 1px 0,
    calc(5*var(--w) - 2px) 4px 0,
    calc(6*var(--w) + 1px) -4px 0,
    calc(7*var(--w)) 3px 0,
    calc(8*var(--w) + 3px) 1px 0,
    calc(9*var(--w)) -5px 0,
    calc(10*var(--w)) 0 0;
 }
.buggy-3:hover {
   text-indent: calc(-20*var(--w));
   transition: 0.3s steps(10);
 }

.buggy-4 {
  --w:11ch;
  letter-spacing: calc(10*var(--w));
  width: var(--w);
  white-space: nowrap;
  text-shadow: 
    calc(-10*var(--w)) 0 0,
    calc(-20*var(--w)) 0 0,
    calc(-30*var(--w)) 0 0,
    calc(-40*var(--w)) 0 0,
    calc(-50*var(--w)) 0 0,
    calc(-60*var(--w)) 0 0,
    calc(-70*var(--w)) 0 0,
    calc(-80*var(--w)) 0 0,
    calc(-90*var(--w)) 0 0,
    calc(-100*var(--w)) 0 0;
 }
.buggy-4:hover {
  text-shadow: 
    calc(-10*var(--w) + 9ch) -20px 4px red,
    calc(-20*var(--w) - 1ch) 0 0,
    calc(-30*var(--w) + 2ch) 0 0,
    calc(-40*var(--w) + 4ch) 0 0,
    calc(-50*var(--w) + 5ch) 0 4px red,
    calc(-60*var(--w)) 0 0,
    calc(-70*var(--w)) 0 0,
    calc(-80*var(--w) - 4ch) 0 0,
    calc(-90*var(--w) - 7ch) 0 0,
    calc(-100*var(--w) - 7ch) 0 0;
 }

.buggy-5{
  --w:11ch;
  letter-spacing: calc(10*var(--w));
  line-height: 3em;
  width: var(--w);
  white-space: nowrap;
  text-shadow: 
    calc(-10*var(--w)) 0 0,
    calc(-20*var(--w)) 0 0,
    calc(-30*var(--w)) 0 0,
    calc(-40*var(--w)) 0 0,
    calc(-50*var(--w)) 0 0,
    calc(-60*var(--w)) 0 0,
    calc(-70*var(--w)) 0 0,
    calc(-80*var(--w)) 0 0,
    calc(-90*var(--w)) 0 0,
    calc(-100*var(--w)) 0 0;
  transition: 0.5s;
 }
.buggy-5:hover {
  text-shadow: 
    calc(-10*var(--w)) 0 0,
    calc(-20*var(--w)) 0 0,
    calc(-30*var(--w) - 3ch) -1em 0,
    calc(-40*var(--w) - 3ch) -1em 0,
    calc(-50*var(--w) - 3ch) -1em 0,
    calc(-60*var(--w) - 4ch) 0 0,
    calc(-70*var(--w) - 5ch) 1em 0,
    calc(-80*var(--w)) 0 0,
    calc(-90*var(--w) - 8ch) 1em 0,
    calc(-100*var(--w) - 10ch) 1em 0;
 }

.buggy-6{
  --w:11ch;
  letter-spacing: calc(10*var(--w));
  line-height: 3em;
  width: var(--w);
  white-space: nowrap;
  --x:0px;
  --y:0px;
  text-shadow: 
    calc(-10*var(--w) + var(--x)) calc(var(--y)) 0,
    calc(-20*var(--w)) 0 0,
    calc(-30*var(--w) + var(--x)) calc(-1*var(--y)) 0,
    calc(-40*var(--w) - 4*var(--x)) 0 0,
    calc(-50*var(--w)) calc(var(--y)) 0,
    calc(-60*var(--w) + 2*var(--x)) calc(-1*var(--y)) 0,
    calc(-70*var(--w)) calc(-2*var(--y)) 0,
    calc(-80*var(--w) - 2*var(--x)) calc(var(--y)) 0,
    calc(-90*var(--w) - 3*var(--x)) calc(-2*var(--y)) 0,
    calc(-100*var(--w) + var(--x)) calc(var(--y)) 0;
   transition: 0.3s cubic-bezier(0.5,-150,0.5,150);
 }
.buggy-6:hover {
    --x:0.5px;
    --y:0.01em;
 } 
/**/
[class] {
  display:inline-block;
  font-size:40px;
  font-family: monospace;
  overflow: hidden;
  margin:25px;
  cursor:pointer;
}

body {
  text-align:center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.