CSSテキストグリッチ効果

.glitch {
  position: relative;
  font-size: 72px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

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

.glitch::before {
  left: 5px;
  text-shadow: -5px 0 #00ffff;
  clip: rect(24px, 550px, 90px, 0);
  animation: glitch-anim-1 0.5s infinite linear alternate-reverse;
}

.glitch::after {
  left: -5px;
  text-shadow: -5px 0 #ff00ff;
  clip: rect(85px, 550px, 140px, 0);
  animation: glitch-anim-2 0.5s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
  0% { clip: rect(132px, 350px, 101px, 30px); }
  20% { clip: rect(1px, 350px, 147px, 30px); }
  40% { clip: rect(24px, 350px, 94px, 30px); }
  60% { clip: rect(78px, 350px, 44px, 30px); }
  80% { clip: rect(65px, 350px, 129px, 30px); }
  100% { clip: rect(53px, 350px, 16px, 30px); }
}

@keyframes glitch-anim-2 {
  0% { clip: rect(129px, 350px, 36px, 30px); }
  20% { clip: rect(36px, 350px, 4px, 30px); }
  40% { clip: rect(85px, 350px, 66px, 30px); }
  60% { clip: rect(148px, 350px, 138px, 30px); }
  80% { clip: rect(34px, 350px, 105px, 30px); }
  100% { clip: rect(149px, 350px, 36px, 30px); }
}