CSSアニメーションの基本を知りたい

✅ 回答

CSSアニメーションには2つの方法があります。用途に応じて使い分けます。

2つの方法の使い分け

	transition	@keyframes + animation
用途	状態A→Bの変化を滑らかに	複雑な動き、ループ
トリガー	:hover, :focus, class追加	ページ読み込み時、常時
難易度	簡単（1行追加するだけ）	やや複雑
例	ボタンのホバー効果	ローディングスピナー

transition の例（まずはこれから）

/* transition：ホバー時に滑らかに変化 */
.btn {
  background: #3b82f6;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: background 0.3s ease, transform 0.2s ease;
}

.btn:hover {
  background: #1d4ed8;
  transform: translateY(-2px);
}

transition を1行追加するだけで、ホバー時の色変化が滑らかになります。

@keyframes の例（慣れたら）

/* @keyframes：複雑なアニメーション */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  animation: fadeInUp 0.5s ease forwards;
}

ページ読み込み時にカードがふわっと表示される効果。

実用例：通知バッジの点滅

/* 実用例：通知バッジの点滅 */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.notification-badge {
  animation: pulse 1.5s infinite;
}

学園祭サイトで使えるアニメーション

• ボタンのホバー効果 — 色が変わる + 少し浮く（transition）
• カードの表示 — スクロールで画面に入ったらフェードイン（@keyframes）
• ハンバーガーメニュー — 開閉時にスライド（transition）

注意点：やりすぎ禁止

アニメーションが多すぎると、ページが重くなり、ユーザーが酔います。「意味のある動き」（操作のフィードバック、注目を集める）だけに絞りましょう。

コピペで使えるアニメーション集

/* フェードイン */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fade-in { animation: fadeIn 0.5s ease; }

/* スライドイン（左から） */
@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
.slide-in { animation: slideIn 0.3s ease; }

/* バウンス */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.bounce { animation: bounce 1s ease infinite; }

/* ホバーで浮き上がる（transitionで実装） */
.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

この4パターンをコピペして使い回すだけで、サイトの印象が大きく変わります。学園祭サイトのカードにhoverエフェクトをつけるだけでも「おっ」と思わせられます。