電話番号
電話番号

CSSだけでWebページのフェードイン表示を実装する方法【JavaScriptなし】

ホームページ制作・SEO対策 | 栃木県宇都宮 ジップサービス > ブログ > CSSだけでWebページのフェードイン表示を実装する方法【JavaScriptなし】

ページの読み込みが完了するまではローディング画面を表示し、完了後にフェードインする方法とは異なりますが、ただフェードインすれば良いということであれば、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」にアニメーションを施すことでフェードイン表示が可能です。 とても簡単に実装することができます。

CSSだけで簡単に実装できますので、ちょっと変化を付けたい時なんかに使ってみるのも良いかと思います。

Top