ロゴ画像を動かすページ遷移

See the Pen ロゴ付きのページ遷移アニメーション by チータツ (@cheese_fuji) on CodePen.

Rerunで再アニメーション↑

デモページで見る

アニメーションの遅延時間animation-delayを好みで調整してください。

CSSの解説

<div class="mask">
  <img src="https://give-shot.jp/tokyocss/wp-content/uploads/2022/04/cropped-tokyocss-favicon.png" alt="サイトロゴ">
</div>

/*** 上にかぶせる背景 ***/
.mask{
  position:fixed; /*固定表示*/
  top:0;
  left:0;
  width: 100vw; /*画面幅*/
  height: 100vh; /*画面の高さ*/
  background-color: #ccc; /*背景色*/
  z-index:999; /*最前面に*/
  animation: fadeOut 0.8s forwards; /*フェードアウト*/
  animation-delay: 1.5s; /*ロゴ画像のアニメーション後に*/
}

/*フェードアウトアニメーション*/
@keyframes fadeOut{
  0%{
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

/*** ロゴ画像 ***/
.mask img{
  position: absolute;
  width: 100px;
  height: 100px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto; /*中央に配置*/
  animation: bound 0.5s forwards; /*任意のアニメーション*/
  animation-delay: 0.6s; /*好みで遅延*/
}

/*ロゴ用の鼓動するアニメーション*/
@keyframes bound{
  30%{
    transform: scale(1.1); /*少し大きく*/
  }
  100% {
    transform: scale(0.9); /*少し小さく*/
  }
}

アニメーション用のdiv要素を作り、ロゴ画像を子要素とします。bodyの疑似要素を使っても良いですが、入れ子構造になるためdivを作ってしまった方が管理が楽だと思います。

また、CSSについては
画面に背景を被せる → その上でロゴ画像を動かす → ロゴごと背景をフェードアウト
の3ステップになっています。

• 画面全体を覆う背景をdiv要素で作成する
  • position: fixedで固定表示
  • width: 100vwとheight: 100vhで画面全体をカバーする
  • z-indexに高い数値を入れて最前面に
  • animationを指定（フェードアウト、時間、forwards）
  • ロゴのアニメーションの後になるように遅延時間animation-delayを設定
• @keyframesでフェードアウト用のアニメーションを作成
  • 0%：opacity: 1で不透明
  • 100%：opacitu: 0で透明にして、visibility: hiddenで非表示に
• ロゴ画像の調整
  • position: absoluteとmargin: autoで中央に配置
  • animationを指定（好きなアニメーション、時間、forwards）
  • animation-delayで遅延時間を設定（フェードアウトより前に）
• @keyframesでロゴ画像用のアニメーションを作成

また、ロゴ画像用のアニメーションについては、形やイメージに合わせて作成するのがおすすめです。（丸なら回転、可愛い系ならバウンドなど）

当サイトで紹介しているもそのまま使えるので、ぜひ参考にしてください。
何にでも使える汎用的アニメーション

応用CSS

ロゴが大きくなってコンテンツが出現

Twitterアプリなどで使われている画面遷移です。
フェードアウトの直前に、transform: scale()でロゴ画像を画面より大きく広げています。

画像のサイズ指定をvwやvhで行うのは不可能なので（vw,vhをpx変換しないといけない）、ラストの拡大はscale()の値を大きくして、食い気味にフェードアウトさせて誤魔化せばOKです。

アニメーションの仕組みについては、円が拡大してコンテンツが現れるページ遷移と同様のものです。

See the Pen ロゴが広がってコンテンツが出現する by チータツ (@cheese_fuji) on CodePen.

ロゴがくるっと回転する

フェードアウトの直前に、rotate()でロゴ画像を2回転させます。
なお、ローディングじゃないので回転し続けて時間を取るのはNG。さりげなく1～2回転させるぐらいが丁度良いかと思います。

アニメーションの詳細については、回転するアニメーションのCSSをご覧ください。

See the Pen ロゴが回転するページ遷移アニメーション by チータツ (@cheese_fuji) on CodePen.