ページ読み込み時のアニメーション効果をお手軽に実装する方法を紹介します。

ページ全体にアニメーション効果を付与する場合、body自体にスタイルを指定していくことになるので、特にクラス等を設定は必要ないので、簡単に導入することが可能です。

フェードイン

透明な状態からフワッと画面をフェードさせるというシンプルなスタイル。まずはここから始めてみましょう。

CSS

body {
	background: #ccc;
	animation: loading 1s;
}
@keyframes loading {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

1秒掛けてloadingというアニメーションを実行しています。あんまり長くしすぎると煩わしくなるので、長くてもこのくらいに留めておいたほうがいいかと。

ページ全体のopacityを0から1に変化させます。

実行結果

右下の「Rerun」を押せばリロードできます。

See the Pen Loading Fade-in by Leo_8192 (@Leo_8192) on CodePen.

フェードイン + ズーム

先程のフェード効果に、ズーム効果も追加してみます。

ページ読み込み時は全体を1.05倍のサイズで表示し、1秒掛けて等倍表示にアニメーションさせるコードです。

CSS

body {
	overflow-x: hidden;
	background: #ccc;
	transform-origin: top center;
	animation: loading 1s;
}
@keyframes loading {
	0% {opacity: 0;transform: scale(1.05);}
	100% {opacity: 1;transform: scale(1);}
}

初期状態が1.05倍のスケールでの表示なので、この記述を入れとかないとアニメーションが完了するまでの間に横スクロールバーが出てしまいます。

変形の原点を指定するプロパティです。使用頻度が少ないので知らない人も多そうですが、覚えておくとtransformを使うときに便利です。

ここでtop centerを指定しておかないと、縦に長いページを開いた際に画面の動きが大きくなりすぎて気持ち悪くなるので注意。

実行結果

See the Pen Loading Fade-in by Leo_8192 (@Leo_8192) on CodePen.

最後に

transform等のプロパティを駆使すればCSSだけでも色々なアニメーション効果を実装することが可能ですが、あんまりごちゃごちゃと色々なエフェクトを付けるとユーザー的にはウザい可能性もあるので、ほどほどにしておきましょう。