
.glitch {
    position: relative;
    color: white;
}

.glitch::before, .glitch::after {
    padding: 0;
    color: white;
    content: attr(data-text);
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    overflow: hidden;
    top: 0;
}

.glitch::before {
    left: 2px;
    text-shadow: -1px 0 red;
    animation-name: glitch-animation-1;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}

.glitch::after {
    left: -2px;
    text-shadow: -1px 0 blue;
    animation-name: glitch-animation-2;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}
@keyframes glitch-animation-1 {
  0% { clip: rect(70px, 9999px, 70px, 0px); }
  5% { clip: rect(114px, 9999px, 138px, 0px); }
  10% { clip: rect(84px, 9999px, 142px, 0px); }
  15% { clip: rect(150px, 9999px, 150px, 0px); }
  20% { clip: rect(74px, 9999px, 94px, 0px); }
  25% { clip: rect(106px, 9999px, 130px, 0px); }
  30% { clip: rect(20px, 9999px, 133px, 0px); }
  35% { clip: rect(122px, 9999px, 122px, 0px); }
  40% { clip: rect(83px, 9999px, 148px, 0px); }
  45% { clip: rect(4px, 9999px, 14px, 0px); }
  50% { clip: rect(56px, 9999px, 84px, 0px); }
  55% { clip: rect(108px, 9999px, 149px, 0px); }
  60% { clip: rect(120px, 9999px, 136px, 0px); }
  65% { clip: rect(13px, 9999px, 43px, 0px); }
  70% { clip: rect(96px, 9999px, 111px, 0px); }
  75% { clip: rect(6px, 9999px, 130px, 0px); }
  80% { clip: rect(124px, 9999px, 142px, 0px); }
  85% { clip: rect(34px, 9999px, 44px, 0px); }
  90% { clip: rect(102px, 9999px, 109px, 0px); }
  95% { clip: rect(14px, 9999px, 57px, 0px); }
  100% { clip: rect(32px, 9999px, 93px, 0px); }
}

@keyframes glitch-animation-2 {
  0% { clip: rect(37px, 9999px, 99px, 0px); }
  5% { clip: rect(0px, 9999px, 140px, 0px); }
  10% { clip: rect(71px, 9999px, 132px, 0px); }
  15% { clip: rect(122px, 9999px, 131px, 0px); }
  20% { clip: rect(85px, 9999px, 93px, 0px); }
  25% { clip: rect(149px, 9999px, 150px, 0px); }
  30% { clip: rect(136px, 9999px, 148px, 0px); }
  35% { clip: rect(130px, 9999px, 142px, 0px); }
  40% { clip: rect(13px, 9999px, 68px, 0px); }
  45% { clip: rect(95px, 9999px, 104px, 0px); }
  50% { clip: rect(77px, 9999px, 88px, 0px); }
  55% { clip: rect(142px, 9999px, 147px, 0px); }
  60% { clip: rect(55px, 9999px, 124px, 0px); }
  65% { clip: rect(59px, 9999px, 81px, 0px); }
  70% { clip: rect(15px, 9999px, 111px, 0px); }
  75% { clip: rect(131px, 9999px, 145px, 0px); }
  80% { clip: rect(36px, 9999px, 90px, 0px); }
  85% { clip: rect(116px, 9999px, 127px, 0px); }
  90% { clip: rect(49px, 9999px, 130px, 0px); }
  95% { clip: rect(141px, 9999px, 149px, 0px); }
  100% { clip: rect(134px, 9999px, 137px, 0px); }
}

