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

2018年4月16日
とっつぁん
css WEBデザイン
この記事は 2 分くらいで読めると思います
CSSの小ネタ
CSSの小ネタ

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の透明度を変えているだけですな

みーたむ

みーたむ簡単ですね!