CSS Text Glitch

.glitch {
  position: relative;
  color: white;
  font-weight: bold;
  font-size: 24px;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.glitch::before {
  animation: glitch-1 0.3s infinite;
  color: #ff0080;
  z-index: -1;
  text-shadow: -2px 0 #ff0080;
  clip: rect(0, 900px, 0, 0);
}

.glitch::after {
  animation: glitch-2 0.3s infinite;
  color: #00ffff;
  z-index: -2;
  text-shadow: 2px 0 #00ffff;
  clip: rect(0, 0, 0, 900px);
}

@keyframes glitch-1 {
  0% { clip: rect(0, 0, 0, 0); }
  20% { clip: rect(0, 9999px, 9999px, 0); }
  100% { clip: rect(0, 0, 0, 0); }
}

@keyframes glitch-2 {
  0% { clip: rect(0, 0, 0, 0); }
  20% { clip: rect(0, 0, 9999px, 9999px); }
  100% { clip: rect(0, 0, 0, 0); }
}