ページ読み込み時にCSSだけでフェードインさせる方法
![CSSの小ネタ](https://vegl.biz/wp-content/uploads/2016/11/21.jpg)
CSSでページ遷移をフワっとさせたい
昔はJavascriptで実装するのが主だったものが最近ではCSSだけで出来てしまう。
そんなCSSの小ネタを一つメモメモ…
![とっつぁん](https://vegl.biz/img/chara_kato11.png)
とっつぁん今回はページ遷移をフワっとさせるちょこっとしたCSSの小ネタです
![みーたむ](https://vegl.biz/img/chara_miitam01.png)
みーたむページ遷移をフワっとさせるのにはどういう意味があるのですか?
![とっつぁん](https://vegl.biz/img/chara_kato11.png)
とっつぁんえ…クリックした時に何となく気持ちいい?
![みーたむ](https://vegl.biz/img/chara_miitam03.png)
みーたむなるほど、なんともフワっとした内容ですね…
![とっつぁん](https://vegl.biz/img/chara_kato11.png)
とっつぁんい…一応デモページを用意したので見てみるでござる…
![みーたむ](https://vegl.biz/img/chara_miitam01.png)
みーたむなるほど、確かにフワっとさせた方が気持ちいい気がしますね
![とっつぁん](https://vegl.biz/img/chara_kato11.png)
とっつぁんせやろ?
やり方
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} }
![とっつぁん](https://vegl.biz/img/chara_kato11.png)
とっつぁんcssのアニメーションを利用してbodyの透明度を変えているだけですな
![みーたむ](https://vegl.biz/img/chara_miitam01.png)
みーたむ簡単ですね!
POST COMMENTコメントを投稿する