ページ読み込み時にCSSだけでフェードインさせる方法

CSSでページ遷移をフワっとさせたい

昔はJavascriptで実装するのが主だったものが最近ではCSSだけで出来てしまう。

そんなCSSの小ネタを一つメモメモ…

とっつぁん今回はページ遷移をフワっとさせるちょこっとしたCSSの小ネタです

みーたむページ遷移をフワっとさせるのにはどういう意味があるのですか？

とっつぁんえ…クリックした時に何となく気持ちいい？

みーたむなるほど、なんともフワっとした内容ですね…

とっつぁんい…一応デモページを用意したので見てみるでござる…

DEMO

みーたむなるほど、確かにフワっとさせた方が気持ちいい気がしますね

とっつぁんせやろ？

やり方

css

body {
	animation: bodyFadeIn 2s ease 0s 1 normal;
	-webkit-animation: bodyFadeIn 2s ease 0s 1 normal;
}

@keyframes bodyFadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}

@-webkit-keyframes bodyFadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}

とっつぁんcssのアニメーションを利用してbodyの透明度を変えているだけですな

みーたむ簡単ですね！