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

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

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→１とシンプルな演出だけです。

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