html

<div class="glitch">
  <p class="origin">Glitch</p>
  <p class="text text-1" aria-hidden="true">Glitch</p>
  <p class="text text-2" aria-hidden="true">Glitch</p>
  <p class="text text-3" aria-hidden="true">Glitch</p>
  <p class="text text-4" aria-hidden="true">Glitch</p>
</div>

scss

.glitch {
  position: relative;
  width: max-content;
  padding-right: 4%; // font-familyやfont-styleによってfontが見切れる場合に調整
  padding-left: 4%; // font-familyやfont-styleによってfontが見切れる場合に調整
  margin-inline: auto; // デバッグ用
  .origin {
    font-size: 10rem; // デバッグ用font-size
    color: transparent; // 幅・高さの基準を持つために透明の文字を設置
  }
  .text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 10rem; // .originと同じfont-sizeを指定
    color: #000;
    font-family: serif;
    font-style: italic;
    animation: 0.12s ease-in-out 1s forwards;
    &.text-1 {
      clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%); // グリッチ用にclip
      animation-name: text1;
    }
    &.text-2 {
      clip-path: polygon(0 40%, 100% 40%, 100% 50%, 0 50%); // グリッチ用にclip
      animation-name: text2;
      animation-delay: 1.1s;
    }
    &.text-3 {
      clip-path: polygon(0 50%, 100% 50%, 100% 60%, 0 60%); // グリッチ用にclip
      animation-name: text3;
      animation-delay: 1.1s;
    }
    &.text-4 {
      clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%); // グリッチ用にclip
      animation-name: text4;
    }
  }
}

@keyframes text1 {
  0%,
  100% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(-30%);
    text-shadow: 8px 8px 5px #ff0000;
  }
}

@keyframes text2 {
  0%,
  100% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(70%);
    text-shadow: 8px 8px 5px #0000ff;
  }
}

@keyframes text3 {
  0%,
  100% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(-70%);
    text-shadow: 8px 8px 5px #ff0000;
  }
}

@keyframes text4 {
  0%,
  100% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(30%);
    text-shadow: 8px 8px 5px #0000ff;
  }
}