CSSで作るページ遷移のフェードインアニメーション

フェードインで現れるページ遷移

2022-05-07

See the Pen フェードインの画面遷移 by チータツ (@cheese_fuji) on CodePen.

Rerunで再アニメーション↑

CSSの解説

コピペ用コード

余計な装飾を省いています。

HTML

<body>
</body>

CSS

/*** フェードインアニメーションを作って ***/
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
/*** bodyやメインコンテンツの要素に反映させる ***/
body{
  animation: fadeIn 4s forwards;
}

フェードインの画面遷移はとっても簡単。
@keyframesでフェードインのアニメーションを作って、それをbodyに反映させるだけです。

@keyframesでフェードインを作成
- 0%で透明opacity: 0
- 100%で不透明opaciyt: 1
- from,toを使ってもOK
bodyにアニメーションを付与する
- animation: アニメーション名｜時間｜forwardsを指定

フェードインアニメーションについての詳細は、こちらをご覧ください。
フェードイン関連のアニメーション