CSSやJavaScriptで実装！ふわっと出現するアニメーションの作り方

はじめに

Webサイトやアプリで「ふわっと」出現するアニメーションは、要素を目立たせたり、洗練された印象を与えたりと便利ですよね。
本記事では、CSSだけで手軽に実装できる「ふわっと出現アニメーション」の作り方と、応用・カスタマイズ例をご紹介します。

基本的な使い方

まずは、最もシンプルな「ふわっと出現」アニメーションを作ってみましょう。

index.html

<div class="fade-in">
  こんにちは、Qiita！
</div>

style.css

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn 1s ease 0.3s forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: none;
  }
}

ふわっと表示されることが確認できました。

ポイント

• opacity: 0; から opacity: 1; へ変化させて「ふわっ」と表示
• transform: translateY(20px); で下から上に少し浮かび上がる動き
• animationプロパティで時間・イージング・遅延・forwards（最終状態を保持）を指定

応用的な使い方

1. 複数要素を順番にふわっと出す（ディレイ付与）

index.html

<ul>
  <li class="fade-in delay-0">Item 1</li>
  <li class="fade-in delay-1">Item 2</li>
  <li class="fade-in delay-2">Item 3</li>
</ul>

style.css

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn 0.8s cubic-bezier(.33,1,.68,1) forwards;
}

.delay-0 { animation-delay: 0s; }
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }


@keyframes fadeIn {
  to {
    opacity: 1;
    transform: none;
  }
}

順番に出現してくるのが確認できました。

ポイント

• opacity: 0; から opacity: 1; へ変化させて「ふわっ」と表示
• transform: translateY(20px); で下から上に少し浮かび上がる動き
• animationプロパティで時間・イージング・遅延・forwards（最終状態を保持）を指定

2. スクロールでふわっと表示（Intersection Observer＋CSS）

index.html

<div class="dummy"></div>
<div class="fade-in-on-scroll">ここにテキスト</div>

style.css

.dummy {
  height: 120vh;
  background-color: bisque;
}
.fade-in-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s, transform 0.7s;
}
.fade-in-on-scroll.is-visible {
  opacity: 1;
  transform: none;
}

script.js

const els = document.querySelectorAll('.fade-in-on-scroll');
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-visible');
    }
  });
});
els.forEach(el => observer.observe(el));

要素が見えたタイミングでふわっと表示されることが確認できました。

Tips

• animation-delayで順番に表示: クラスを追加してディレイを調整

• イージング調整: cubic-bezier で好みの動きを作れる
  例: cubic-bezier(.33,1,.68,1) は自然な「ふわっ」感

• transformの工夫:ではscale(0.95) や translateX(20px) を組み合わせると雰囲気が変わる

• 多用は禁物: すべての要素に使うとくどくなるので、アクセントとして使うのがコツ

最後に

CSSだけでも、十分にリッチな「ふわっと」アニメーションは実装できます。
この記事が、あなたのUIにちょっとした演出を加える参考になれば幸いです。