フェードインとは | バイブコーダーのための名称辞典

フェードインとは

不透明度を 0 から 1 に変化させて、要素をふわっと浮かび上がらせるように表示するアニメーション。

概要

要素の不透明度（opacity）を 0 から 1 へ、位置を少しだけずらした状態から本来の位置へ変化させることで、「ふわっと表示された」という印象を作るアニメーションです。ページを開いた直後や、モーダル・トーストなどの部品が出現するタイミングでよく使われます。 @keyframes を使った CSS アニメーション、または JavaScript でクラスを付け替える方法のどちらでも実装できます。

別名

表記ゆれ：フェードイン、フェード、ふわっと表示

「フェード」だけで「フェードイン」を指すこともありますが、逆に消えていく「フェードアウト」と紛らわしいときは「フェードイン」とはっきり伝えると安全です。

AI への伝え方

「ページを開いたらふわっと表示して」「フェードインで出して」で伝わります。表示にかける時間や、少しだけ位置をずらして出す（下から・上から）のか、その場でただ不透明度だけ変化させるのかを伝えると仕様がぶれません。動きに敏感なユーザーのために、prefers-reduced-motion: reduce の環境ではアニメーションなしで表示する配慮も必要です。

似たパーツとの違い

「スクロールアニメーション」はスクロールして要素が画面に入ったタイミングで再生する点が違い、フェードインはページの読み込み時やモーダルの出現時など、スクロールに関係なく再生される場面で使われることが多い言葉です。

デモ

ふわっと表示されました

コード

HTML

<div class="fade-in-demo">
  <div class="fade-in-demo__box">
    <p>ふわっと表示されました</p>
  </div>
  <button class="fade-in-demo__button" type="button">再生</button>
</div>

CSS

.fade-in-demo {
  font-family: sans-serif;
}

.fade-in-demo__box {
  padding: 24px;
  margin-bottom: 16px;
  border-radius: 8px;
  background: #0017c1;
  color: #ffffff;
  text-align: center;
  animation: fade-in-demo-fade 0.8s ease both;
}

@keyframes fade-in-demo-fade {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-demo__button {
  padding: 8px 16px;
  border: 1px solid #0017c1;
  border-radius: 8px;
  background: #ffffff;
  color: #0017c1;
  cursor: pointer;
  font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .fade-in-demo__box {
    animation: none;
  }
}

const box = document.querySelector(".fade-in-demo__box");
const button = document.querySelector(".fade-in-demo__button");

button.addEventListener("click", () => {
  box.style.animation = "none";
  void box.offsetWidth;
  box.style.animation = "";
});