.glitch {
    position: relative;
    display: inline-block;
    font-size: 3em;
  }
  
  .glitch:before,
  .glitch:after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .glitch:before {
    left: 2px;
    text-shadow: -1px 0 #00ff00;
    animation: glitch-anim-1 2s infinite linear alternate-reverse;
  }
  
  .glitch:after {
    left: -2px;
    text-shadow: 1px 0 #ff0000;
    animation: glitch-anim-2 3s infinite linear alternate-reverse;
  }
  
  @keyframes glitch-anim-1 {
    0% {
      clip: rect(48px, 9999px, 53px, 0);
      transform: skew(0.5deg);
    }
    20% {
      clip: rect(16px, 9999px, 30px, 0);
      transform: skew(-0.8deg);
    }
    40% {
      clip: rect(43px, 9999px, 25px, 0);
      transform: skew(0.2deg);
    }
    60% {
      clip: rect(36px, 9999px, 56px, 0);
      transform: skew(-1deg);
    }
     80% {
      clip: rect(33px, 9999px, 29px, 0);
      transform: skew(0.5deg);
    }
    100% {
      clip: rect(24px, 9999px, 12px, 0);
      transform: skew(-0.2deg);
    }
  }
  
  @keyframes glitch-anim-2 {
    0% {
      clip: rect(56px, 9999px, 14px, 0);
      transform: skew(-0.1deg);
    }
    20% {
      clip: rect(16px, 9999px, 45px, 0);
      transform: skew(0.6deg);
    }
    40% {
      clip: rect(22px, 9999px, 16px, 0);
      transform: skew(0.2deg);
    }
    60% {
      clip: rect(56px, 9999px, 7px, 0);
      transform: skew(-0.9deg);
    }
     80% {
      clip: rect(46px, 9999px, 36px, 0);
      transform: skew(0.4deg);
    }
    100% {
      clip: rect(35px, 9999px, 47px, 0);
      transform: skew(-0.3deg);
    }
  }