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

更新日 : 2021.04.04

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

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

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でアニメーション完了時のスタイルがアニメーション完了後にも適用されます。