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

更新日 : 2021.04.04

ページ遷移時のフェードインアニメーションの画像
Share
1
0
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. 【保存版】CSSのみのボタンデザイン!私が現場で使ってきたボタンアイデア30選の画像

    【保存版】CSSのみのボタンデザイン – 私が現場で使ってきたボタンアイデア30選

  2. 現場で使えるFlexboxレイアウト12選。実際に使ってきたレイアウトを紹介しますの画像

    現場で使えるFlexboxレイアウト12選。実際に使ってきたレイアウトを紹介します

  3. Web制作の現場で使えるWebサービス15選!無料で使えるサービスを集めてみた

    Web制作の現場で使えるWebサービス15選!無料で使えるサービスを集めてみた

  4. CSS見出しデザイン21スタイル - シンプルな見出しデザインをご紹介の画像

    CSS見出しデザイン21選。現場ですぐ使える見出しデザインをご紹介

  5. ボタンやテキストリンク、hoverスタイルをCSSのみで19パターン実装するの画像

    CSSのみで実装するボタン、テキストリンク、hoverスタイル19選