フェードイン・フェードアウトってどんな効果？

今回のお題は、

「フェードイン・フェードアウト」です！

今回も最初に動きを見てみましょう。少し下に注目してください。

今回は徐々に現れたり、透明になって隠れたり…というのを繰り返してみました。

このように、ある要素が少しずつ現れてくる効果がフェードインです。

フェードアウトは反対に、ある要素が少しずつ隠れていく効果です。

映画や演劇、テレビなどでも用いられる効果なので、一度は目にしたことがある、という方も多いのではないでしょうか。

どんな時に使うの？

例えば、

• ロゴやセクションのタイトルなどを強調させたいとき
• 下層ページのローディングアニメーションとして、自然にページ遷移したことを表したいとき

などの場面で用いられます。

この効果は、ふわっと現れたり消えたりして余韻を残すことで、見る人に要素を印象付ける効果があります。そのため、ロゴなどの印象付けたい要素によく用います。

他にも、移りかわりを表現しやすいため、スライドが変化したときやページが移ったときなどにも用います。

どうやって実装しているの？

/* HTML */
<div class="fadebox">
 <h5>TITLE</h5>
 <p>タイトル</p>
</div>

/* CSS */
.fadebox{
  display: inline-block;
  padding: 30px;
  margin: 30px 0;
  animation: fade-in-out 5s ease 0s infinite normal forwards;
  background-color: #F9FAFB;
  color: #2E2B2B;
  font-size: 18px;
  opacity: 0;
  overflow: hidden;
}

.fadebox > h5{
  float: left;
}

.fadebox > p{
  float: left;
  padding-left: 15px;
  color: #b5ac91;
  font-size: 14px;
}
@keyframes fade-in-out {
  0%{
    opacity: 0;
  }

  50%{
    opacity: 1;
  }

  100%{
    opacity: 0;
  }
}

ポイントはアニメーションとして、opacity（不透明度）を設定することです。opacityを0に近づけると透明に、1に近づけると不透明になることを利用しています。

まとめ

• フェードインは、ある要素が少しずつ現れてくる効果。
  フェードアウトは、ある要素が少しずつ隠れていく効果。
• ロゴなどの印象付けや、ページ遷移のような移りかわりの場面で用いられる。

次回は、スライドイン・スライドアウトとフェードイン・フェードアウトを合わせた応用編です！