はじめに

お久しぶりです！今回は小ネタみたいなものですが、サイトに取り入れると少しかっこよくなる
「CSSによるフェードアウト」です！！
とても簡単なのでちらっと見ていってください(^^)/

この記事を読むとどうなるの？

→CSSでのフェードアウトの方法が分かる

どうやってやるの

①HTMLを作る（当たり前ですね）

何をするにしてもCSSを使うので、まずはHTMLを適当に作りましょうね。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!--CSSの読み込みを忘れないようにしましょうね-->
    <link rel="stylesheet" href="stylesheet.css">
    <title>Document</title>
  </head>
  <body>
    <div class = fadeout>
        <img src = "画像やgifのURL">
    </div>
  </body>
</html>

②アニメーションを使おう

CSSでアニメーションを使うのであれば２つのことをする必要があります。
以下のコードを見ながら理解していきましょう！

stylesheet.css

.fadeout { 
    animation: fadeOut 2s; /*keyframesで命名したものを使う。2秒間で消える*/
    animation-fill-mode: both; /*0%の時と100%の時の状態を保つ*/
}

@keyframes fadeOut {
    0% {
        opacity: 1; /*初めに存在する*/
    }
    100% {
        opacity: 0; /*最後に消える*/
    }
}

.fadeoutの部分について

animation: fadeOut 2s;
ここがアニメーションの全てです！
読んでの通り、アニメーションとして二秒間でフェードアウトしますよっていうコードです。

animation-fill-mode: both;
これはフェードアウトする前とした後の状態をずっと継続させるというコードです。
これをかかないとフェードアウトしても消えた状態が維持されません。

ここまでは大丈夫でしょうか？
これだけでできたら楽勝なのですが流石にそこまで単純ではありません。
fadeOutの部分が何を表すのかを書かなければなりません。

keyframes部分について

keyframesというものを使ってどのようなアニメーションをさせるのかを決めないといけないのです。
次のように書きます


@keyframes 任意の名前 {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

今回はフェードアウトをするのでfadeOutという名前をつけたというだけです。
0%と100%というのは「最初」と「最後」を表しています。
opacityは「存在するかしないか」を表していて、１は存在、０は存在しないということです。

最後に

久しぶりに書いた記事ですがいかがだったでしょうか
皆さんもフェードアウトを使ってサイトをかっこよくしましょう！！

0から分かるCSSだけでフェードアウトしてみた