CSS
animation
スニペット

【CSSアニメーション】CSSで読み込み時にフェードイン

内容

CSSのみでアニメーションするスニペットです。
CSS記述のみで読み込み時にフェードインします。

コード

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

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

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

デモ

See the Pen CSS fadein by harumi-sato (@harumi-sato) on CodePen.

参考サイト

CSS だけで Web ページのフェードイン表示を実装する方法 | q-Az
https://q-az.net/fadein-open-only-css/