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

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

See the Pen Untitled by MxGRAIN ( @mxgrain ) 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 でアニメーション完了時のスタイルがアニメーション完了後にも適用されます。