ページ読み込み時にフワッと表示させるCSS

ページを読み込んだときにフワッとコンテンツが表示されるようにするCSS。bodyに適用させます。

body {
	-webkit-animation: fadeIn 2.5s ease 0s 1 normal;
	animation: fadeIn 2.5s ease 0s 1 normal;
}
@keyframes fadeIn {
	0% {
		opacity: 0
	}
	100% {
		opacity: 1
	}
}
@-webkit-keyframes fadeIn {
	0% {
		opacity: 0
	}
	100% {
		opacity: 1
	}
}

2.5sの数字がアニメーションの時間です。ゆっくり表示させたい場合はもっと大きく、シュッと表示させたい場合は小さくします。

また、easeを変えることでアニメーションの進行割合を変更できます。

• ease：開始と完了を滑らかにする
• linear：一定の割合
• ease-in：ゆっくり始まる
• ease-out:ゆっくり終わる
• ease-in-out:ゆっくり始まってゆっくり終わる
• cubic-bezier(数値,数値,数値,数値):数値で細かく指定