優しい雰囲気になる♪ページ推移時にふわっとフェードインする方法

  • LINEで送る

私が最近作るウェブサイトには、ふわっとフェードインするCSSを使っています。

優しい雰囲気で、CSSだけなのにjQueryのような動きが実装できるのでおすすめです。

CSSへの実装コードはこちら

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

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

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

bodyのところへ追加するだけで簡単です。

  • LINEで送る

こちらもチェック!