Glitch Text Effect

.glitch-text {
  font-size: 48px;
  font-weight: 900;
  position: relative;
  color: #000;
  letter-spacing: 2px;
}
.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.glitch-text::before {
  left: 2px;
  text-shadow: -2px 0 #ff00ff;
  animation: glitch-anim 3s infinite linear alternate-reverse;
}
.glitch-text::after {
  left: -2px;
  text-shadow: -2px 0 #00ffff;
  animation: glitch-anim2 2s infinite linear alternate-reverse;
}
@keyframes glitch-anim {
  0% { clip-path: inset(47% 0 5% 0); }
  20% { clip-path: inset(59% 0 39% 0); }
  40% { clip-path: inset(43% 0 1% 0); }
  60% { clip-path: inset(25% 0 63% 0); }
  80% { clip-path: inset(53% 0 7% 0); }
  100% { clip-path: inset(5% 0 79% 0); }
}
@keyframes glitch-anim2 {
  0% { clip-path: inset(65% 0 3% 0); }
  20% { clip-path: inset(27% 0 69% 0); }
  40% { clip-path: inset(3% 0 91% 0); }
  60% { clip-path: inset(61% 0 17% 0); }
  80% { clip-path: inset(23% 0 49% 0); }
  100% { clip-path: inset(83% 0 1% 0); }
}