CSSアニメーションの基本と実用エフェクト例

2025.10.21

CSSアニメーションの基本と実用エフェクト例

CSSアニメーションの基本と実用エフェクト例

CSSだけで表現できるアニメーションは、UIに「動き」と「注目」を与え、操作感（UX）を高めます。本記事では、transitionと@keyframes（animation）の基本から、実務でよく使う実用的なエフェクト例、アクセシビリティとパフォーマンスの注意点までまとめて解説します。

1. 基本：transition と transform / opacity の組み合わせ

transitionは、プロパティの変化（状態遷移）にアニメーションを付ける際に使います。レイアウト（幅・高さ・margin）ではなく、transform と opacity を使うのがパフォーマンス面の基本です。

CSS
/* ホバー時に滑らかに色と位置を変える */
.btn-button {
  display: inline-block;
  padding: 0.5em 1.5em;
  background-color: #2cb1dc;
  color: #fff;
  border-radius: 0.4em;
  opacity: 1;
  transition: transform 0.2s ease, opacity 0.5s, background 0.5s ease;
}
.btn-button:hover {
  transform: translateY(-4px);
  background: #ff0000;
  opacity: 0.8;
}
ボタン

2. 基本：@keyframes を使ったアニメーション

@keyframes（および animation）は、複数ステップのアニメーションやループするエフェクトに向きます。

CSS
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in-up {
  animation: fadeInUp 1s ease infinite alternate forwards;
}

3. 実用エフェクト例（コード付き）

3-1. ボタンの押下感（微細なスケール）

CSS
.btn-press {
  display: inline-block;
  padding: 0.5em 1.5em;
  background-color: #2cb1dc;
  color: #fff;
  border-radius: 0.4em;
  opacity: 1;
  transition: transform 120ms cubic-bezier(.2,.8,.2,1);
}
.btn-press:active {
  transform: scale(0.9);
}

クリック／タップ時に縮むことで「押した感」を自然に出します。

ボタン

3-2. フェード＋スライドで読み込み時の登場アニメ（スタガー付き）

CSS
/* 共通アニメ */
@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.item {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeSlide 1.2s ease infinite alternate forwards;
}

/* スタガー（遅延）を付ける */
.item--delay-1 { animation-delay: 0.8s; }
.item--delay-2 { animation-delay: 1.6s; }
.item--delay-3 { animation-delay: 2.4s; }

リストやカードの表示時に順番にフェードインさせると、視線導線が自然になり印象が良くなります。

1
2
3

3-3. ローディング（スピナー）

CSS
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  width: min(50px, calc(50 / 640 * 100vw));
  aspect-ratio: 1 / 1;
  background-color: #fff;
  border: 4px solid rgba(0,0,0,0.2);
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 2s linear infinite;
}

3-4. カードの裏返し（3D フリップ）

CSS
.flip {
  perspective: 1000px;
}
.flip__inner {
  position: relative;
  width: 300px;
  height: 180px;
  transform-style: preserve-3d;
  transition: transform 500ms cubic-bezier(.2,.8,.2,1);
}
.flip:hover .flip__inner {
  transform: rotateY(180deg);
}
.flip__face {
  position: absolute;
  backface-visibility: hidden;
  inset: 0;
}
.flip__face--back {
  transform: rotateY(180deg);
}

3D系は演出効果が高いですが、モバイルや低性能端末で重くなる場合があるため注意が必要です。

フロント
ここに表側の内容
（サムネ・タイトルなど）を配置します。
バック
裏側には詳細情報やボタン、リンクなどを置けます。

3-5. CSSのみのトースト（簡易通知）出現・消失

CSS
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  background: #222;
  color: #fff;
  padding: 12px 16px;
  border-radius: 8px;
}
.toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

表示は JS でクラスを付け外ししますが、アニメーションは CSS で担保するとシンプルです。

サンプルメッセージ

4. アニメーションの設定項目（短いリファレンス）

  • transition: property duration timing-function delay;
  • animation: name duration timing-function delay iteration-count direction fill-mode;
  • 代表的な timing-function: ease, linear, ease-in, ease-out, cubic-bezier()
  • fill-mode: forwards はアニメ終了後も最終状態を保持する

5. アクセシビリティとユーザー設定

アニメーションは便利ですが、動くものに不快感を覚えるユーザーや、画面酔いをするユーザーもいます。prefers-reduced-motion による配慮は必須です。

CSS
@media (prefers-reduced-motion: reduce) {
  .animated, .fade-in-up, .spinner {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

この設定により、動きをほぼなくして静的に表示するようにできます。

6. パフォーマンス最適化のポイント

  • アニメーションはできるだけ transform（translate/scale/rotate） と opacity に限定する（レイアウトの再計算を避ける）
  • will-change は頻繁に使わない。必要な要素に対して短時間だけ指定する
  • 大量のアニメーションを同時に走らせない（スタガーや遅延を活用）
  • 低スペック端末ではアニメをオフにするフォールバックを用意する

7. よくある落とし穴と回避策

  • レイアウトプロパティのアニメーション（width/height/margin）は避ける。これらはレイアウト計算（reflow）を発生させ、負荷が高い。
  • アニメーションの過剰な使用でページがうるさくなる。目的を明確にして使う。
  • 3D効果は美しいが、モバイルでカクつく場合あり。will-change や backface-visibility の活用で改善できることもある。

8. 実践Tips：JSと組み合わせた応用

CSSアニメーションは JS と組み合わせると効果的です。例：

  • Intersection Observerで要素が見えたらクラス付与してアニメ開始
  • トリガーは pointer events（ホバー）ではなくフォーカスやクリックにも対応する
  • ユーザー設定（アニメON/OFF）を保存して、再訪時も反映する

9. まとめ

  • 用途に応じて transition と @keyframes を選ぶ
  • パフォーマンス重視で transform と opacity を中心にアニメを設計する
  • prefers-reduced-motion でユーザー配慮を入れること

このページのコードはそのままコピペで試せます。実際に動作させてみて、UX を高める最適なアニメーションを見つけてください。

関連記事

PAGE TOP