CSSアニメーションでフェードインを実装するコード

2024年9月4日

当サイトには広告が含まれています。

CSSアニメーションでシンプルなフェードインのアニメーションを実装するためのコードをメモしておきます。

CSS

.test {
    opacity: 0;
    animation: fadeIn 0.4s ease-in forwards;
}

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

0.4sのところがスピードなのでお好みで調整してください。

他に紹介してくれてるサイトはどこも説明ばっかりで結局自分好みのものが見つけられなかったので、chatGPTに出力させました。
最近はchatGPTに聞いた方が早いということが多くなってきたように感じます。便利な時代ですね。

自分がどう使ったのか

このコードをbodyに割り当てて、ページ遷移ごとにフェードインが発生するようにしました。
いい感じの雰囲気になりますよ。
CSSカスタマイズでぜひ活用してみてください。

他のページに移動するたびにアニメーション発生

CSS

body {
    opacity: 0;
    animation: fadeIn 0.4s ease-in forwards;
}

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