.glitch:hover {
   position: relative;
  /* Animation provies a slight random skew. Check bottom of doc for more information on how to random skew. */
   animation: glitch-skew 2s infinite linear alternate-reverse;
   cursor: none;
}
 .glitch:hover::before {
   content: attr(data-text);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   left: 2px;
   text-shadow: -2px 0 #ff00c1;
  /* Creates an initial clip for our glitch. This works in a typical top,right,bottom,left fashion and creates a mask to only show a certain part of the glitch at a time. */
   clip: rect(44px, 450px, 56px, 0);
  /* Runs our glitch-anim defined below to run in a 5s loop, infinitely, with an alternating animation to keep things fresh. */
   animation: glitch-anim 5s infinite linear alternate-reverse;
}
 .glitch:hover::after {
   content: attr(data-text);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   left: -2px;
   text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
   animation: glitch-anim2 1s infinite linear alternate-reverse;
}
/* Creates an animation with 20 steaps. For each step, it calculates a percentage for the specific step. It then generates a random clip box to be used for the random glitch effect. Also adds a very subtle skew to change the 'thickness' of the glitch.*/
 @keyframes glitch-anim {
   0% {
     clip: rect(46px, 9999px, 51px, 0);
     transform: skew(0.93deg);
  }
   5% {
     clip: rect(65px, 9999px, 27px, 0);
     transform: skew(0.84deg);
  }
   10% {
     clip: rect(1px, 9999px, 40px, 0);
     transform: skew(0.08deg);
  }
   15% {
     clip: rect(9px, 9999px, 69px, 0);
     transform: skew(0.72deg);
  }
   20% {
     clip: rect(94px, 9999px, 64px, 0);
     transform: skew(0.63deg);
  }
   25% {
     clip: rect(15px, 9999px, 59px, 0);
     transform: skew(0.26deg);
  }
   30% {
     clip: rect(67px, 9999px, 63px, 0);
     transform: skew(0.73deg);
  }
   35% {
     clip: rect(25px, 9999px, 37px, 0);
     transform: skew(0.74deg);
  }
   40% {
     clip: rect(8px, 9999px, 85px, 0);
     transform: skew(0.58deg);
  }
   45% {
     clip: rect(17px, 9999px, 23px, 0);
     transform: skew(0.15deg);
  }
   50% {
     clip: rect(17px, 9999px, 5px, 0);
     transform: skew(0.5deg);
  }
   55% {
     clip: rect(34px, 9999px, 42px, 0);
     transform: skew(0.12deg);
  }
   60% {
     clip: rect(95px, 9999px, 99px, 0);
     transform: skew(0.34deg);
  }
   65% {
     clip: rect(88px, 9999px, 42px, 0);
     transform: skew(0.54deg);
  }
   70% {
     clip: rect(6px, 9999px, 6px, 0);
     transform: skew(0.1deg);
  }
   75% {
     clip: rect(43px, 9999px, 26px, 0);
     transform: skew(0.47deg);
  }
   80% {
     clip: rect(63px, 9999px, 58px, 0);
     transform: skew(0.57deg);
  }
   85% {
     clip: rect(6px, 9999px, 18px, 0);
     transform: skew(0.99deg);
  }
   90% {
     clip: rect(59px, 9999px, 17px, 0);
     transform: skew(0.63deg);
  }
   95% {
     clip: rect(61px, 9999px, 55px, 0);
     transform: skew(0.02deg);
  }
   100% {
     clip: rect(6px, 9999px, 10px, 0);
     transform: skew(0.82deg);
  }
}
 @keyframes glitch-anim2 {
   0% {
     clip: rect(36px, 9999px, 80px, 0);
     transform: skew(0.55deg);
  }
   5% {
     clip: rect(90px, 9999px, 19px, 0);
     transform: skew(0.52deg);
  }
   10% {
     clip: rect(9px, 9999px, 54px, 0);
     transform: skew(0.85deg);
  }
   15% {
     clip: rect(69px, 9999px, 96px, 0);
     transform: skew(0.96deg);
  }
   20% {
     clip: rect(21px, 9999px, 79px, 0);
     transform: skew(0.52deg);
  }
   25% {
     clip: rect(29px, 9999px, 6px, 0);
     transform: skew(0.67deg);
  }
   30% {
     clip: rect(21px, 9999px, 95px, 0);
     transform: skew(0.29deg);
  }
   35% {
     clip: rect(10px, 9999px, 32px, 0);
     transform: skew(0.82deg);
  }
   40% {
     clip: rect(60px, 9999px, 30px, 0);
     transform: skew(0.08deg);
  }
   45% {
     clip: rect(44px, 9999px, 54px, 0);
     transform: skew(0.44deg);
  }
   50% {
     clip: rect(86px, 9999px, 55px, 0);
     transform: skew(0.81deg);
  }
   55% {
     clip: rect(29px, 9999px, 26px, 0);
     transform: skew(0.32deg);
  }
   60% {
     clip: rect(15px, 9999px, 49px, 0);
     transform: skew(0.87deg);
  }
   65% {
     clip: rect(43px, 9999px, 50px, 0);
     transform: skew(0.59deg);
  }
   70% {
     clip: rect(61px, 9999px, 4px, 0);
     transform: skew(0.58deg);
  }
   75% {
     clip: rect(16px, 9999px, 80px, 0);
     transform: skew(0.16deg);
  }
   80% {
     clip: rect(31px, 9999px, 97px, 0);
     transform: skew(0.1deg);
  }
   85% {
     clip: rect(63px, 9999px, 2px, 0);
     transform: skew(0.08deg);
  }
   90% {
     clip: rect(63px, 9999px, 82px, 0);
     transform: skew(0.34deg);
  }
   95% {
     clip: rect(89px, 9999px, 92px, 0);
     transform: skew(0.11deg);
  }
   100% {
     clip: rect(33px, 9999px, 37px, 0);
     transform: skew(0.62deg);
  }
}
 @keyframes glitch-skew {
   0% {
     /*transform: skew(-4deg);*/
  }
   10% {
     /*transform: skew(0deg);*/
  }
   20% {
     /*transform: skew(-3deg);*/
  }
   30% {
     /*transform: skew(-4deg);*/
  }
   40% {
     /*transform: skew(-2deg);*/
  }
   50% {
     /*transform: skew(5deg);*/
  }
   60% {
     /*transform: skew(-4deg);*/
  }
   70% {
     /*transform: skew(-4deg);*/
  }
   80% {
     /*transform: skew(1deg);*/
  }
   90% {
     /*transform: skew(5deg);*/
  }
   100% {
     /*transform: skew(-1deg);*/
  }
}