clip-pathを使ったテキスト表示アニメーション。
テキストの表示位置をclip-patのinsetで制御している。

  .heading {
    width: fit-content;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1s ease-in-out;
  }
  .heading.show {
    clip-path: inset(0);
  }