Glitch Text Effect

<div style="background: #000; padding: 60px; border-radius: 8px;">
  <div class="glitch-text" data-text="GLITCH">GLITCH</div>
</div>

.glitch-text {
  font-size: 48px;
  font-weight: bold;
  text-transform: uppercase;
  position: relative;
  color: white;
  letter-spacing: 3px;
  font-family: 'Courier New', monospace;
}
.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.glitch-text::before {
  animation: glitch-anim-1 0.5s infinite;
  color: #ff00ff;
  z-index: -1;
}
.glitch-text::after {
  animation: glitch-anim-2 0.5s infinite;
  color: #00ffff;
  z-index: -2;
}
@keyframes glitch-anim-1 {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}
@keyframes glitch-anim-2 {
  0% { transform: translate(0); }
  20% { transform: translate(2px, 2px); }
  40% { transform: translate(2px, -2px); }
  60% { transform: translate(-2px, 2px); }
  80% { transform: translate(-2px, -2px); }
  100% { transform: translate(0); }
}