.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  z-index: -1;
}

.glitch::before {
  animation: glitchTop 2s infinite linear alternate-reverse;
  top: -2px;
  color: #0ff;
}

.glitch::after {
  animation: glitchBottom 2.5s infinite linear alternate-reverse;
  top: 2px;
  color: #f00;
}

@keyframes glitchTop {
  0% { clip-path: inset(0 0 80% 0); transform: translate(-2px, -2px); }
  100% { clip-path: inset(50% 0 0 0); transform: translate(0, 2px); }
}

@keyframes glitchBottom {
  0% { clip-path: inset(0 0 90% 0); transform: translate(2px, 2px); }
  100% { clip-path: inset(70% 0 0 0); transform: translate(-1px, -2px); }
}