CSSアニメーションでバウンド・フェード・拡大を作る方法｜すぐ使えるサンプル付き

CSSアニメーションを使うと、ボタン・画像・ボックスなどに「動き」を与えて、ユーザーに直感的で楽しい印象を与えられます。この記事では、バウンド・フェードイン・拡大（ズーム）の3種類のアニメーションを簡単に実装する方法を紹介します。

1 実装のポイント

• CSSのみで動きのある演出が可能
• 複雑なJavaScriptは不要
• どのテーマでも動作
• アニメーションクラスを追加するだけで使える

<!-- バウンドアニメーション -->
<div class="animate-bounce box">バウンドします</div>

<!-- フェードイン -->
<div class="animate-fade box">フェードインします</div>

<!-- 拡大（ズームイン） -->
<div class="animate-zoom box">拡大します</div>
  

2 汎用CSS

/* --------------------------------------------------
 * デモ用ボックス
 * -------------------------------------------------- */

.box {                           /* デモボックスの外観 */
  width: 250px;                 /* 横幅 */
  padding: 20px;                /* 余白 */
  margin: 20px 0;               /* 上下余白 */
  background: #ffc;             /* 背景 */
  border-radius: 8px;           /* 角丸 */
  text-align: center;           /* 中央寄せ */
  font-size: 1.1em;             /* 大きめの文字 */
  transition: all 0.3s ease;    /* なめらかな変化 */
}

/* --------------------------------------------------
 * ① バウンド
 * -------------------------------------------------- */
@keyframes bounce {               /* バウンド動き定義 */
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);     /* 高さ0 */
  }
  40% {
    transform: translateY(-20px); /* 大きく跳ねる */
  }
  60% {
    transform: translateY(-10px); /* 小さく跳ねる */
  }
}

.animate-bounce:hover {           /* hoverしたときだけ発動 */
  animation: bounce 0.8s ease;    /* アニメ実行 */
}


/* --------------------------------------------------
 * ② フェードイン
 * -------------------------------------------------- */
@keyframes fadeIn {               /* フェード定義 */
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.animate-fade:hover {             /* hover時にフェード */
  animation: fadeIn 1s ease;
}


/* --------------------------------------------------
 * ③ 拡大（ズームイン）
 * -------------------------------------------------- */
@keyframes zoomIn {               /* ズーム定義 */
  0% {
    opacity: 0;                  /* 非表示 */
    transform: scale(0.6);       /* 小さく表示 */
  }
  100% {
    opacity: 1;                  /* 表示 */
    transform: scale(1);         /* 通常サイズに */
  }
}

.animate-zoom:hover {             /* hover時にズーム */
  animation: zoomIn 0.7s ease;
}
  

3 完成イメージ

4 代用プラグイン

コードを書かずにアニメーションを使いたい場合は以下も選択肢です：

• Animate It!
• Elementor（アニメーション内蔵）
• WOW.js（スクロールアニメーション）

5 まとめ

CSSアニメーションは、サイトに動きを加える最も簡単な方法です。
バウンド・フェード・拡大を組み合わせることで、ボタン、画像、コンテンツを魅力的に見せることができます。ぜひあなたのサイトにも取り入れてみてください。