ページ遷移時のフェードインアニメーションをCSSのみで実装する

更新日 : 2023.03.16

ページ遷移時のフェードインアニメーションの画像
Share
1
1
12

ページ遷移の時にフェードインしながらコンテンツが表示されるアニメーションの実装です。遷移時に演出をつけたい、でも大げさなものは要らないという時にピッタリの表現です。

See the Pen
Page transition fade-in
by Kobayashi (@Pulp_Kobayashi)
on CodePen.

※右下の『Rerun』をクリックすると遷移アニメーションを確認できます。

<div class="wrap">
	<div class="bg"></div>
</div>
.wrap {
	animation: fadein 3s forwards;
}

@keyframes fadein {
	0% {opacity: 0}
	100% {opacity: 1}
}

animationアニメーションの設定は、3秒3sをかけて@keyframes内の指定を実行させています。透明度opacityを0→1とシンプルな演出だけです。

forwardsでアニメーション完了時のスタイルがアニメーション完了後にも適用されます。

人気記事

  1. Chrome拡張機能を見直してみた

    便利なChrome拡張機能を見直してみた

  2. いざという時に使える13のHTML&CSS Tips集の画像

    いざという時に使える13のHTML&CSS Tips集

  3. ジュンク堂書店池袋本店の選書フェア

    ジュンク堂書店池袋本店の選書フェアで選んだ34冊の中から9冊を紹介してみる

  4. 見出しをおしゃれにする英字フォントの画像

    【無料】見出しをおしゃれにする英字フォントを19個集めてみた

  5. 見出しに使えるfit-contentを解説してみる