【CSS】とにかく楽に簡単にページ遷移時のふわっとアニメーションを実現する方法。

Next.jsで作成したMDXベースの静的サイトでふわっと遷移アニメーションを実装したかったある日。
調べてみるとちゃんとライブラリとかAPI通すのはなんかめんどくさそう。

どうせWebなんだしCSSでゴリ押すことに。
CSSだからReactだろうがVueだろうがなんだっておっけー！(多分)。

実装

なんでもとにかくふわっと。

* {
  animation-name: fuwa;
  animation-duration: 1s;
}

@keyframes fuwa{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

一部分だけふわっとさせたい時。
※main内をふわっとさせたいけどh1はさせたくない想定。

main {
  * {
    animation-name: fuwa;
    animation-duration: 1s;
  }

  h1 {
    animation-name: unset;
  }
}

@keyframes fuwa{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

タイミングとか制御したいならちゃんとしたほうがいいと思うけど、とりあえずなら十分だと思う。
クラスetcで指定してjsなりで操作すればもはや自由自在(本末転倒)。