CSSアニメーション・トランジションとは？基本を解説

✅ CSSアニメーション・トランジションとは？

Webサイトをより魅力的に、ユーザーにとって心地よい体験にするために使われるのが CSSアニメーション と トランジション です。

• CSSトランジション → 要素の状態が変わったとき（例：マウスホバー）に、スタイルの変化を滑らかにする
• CSSアニメーション → 指定した動きを繰り返したり、複数のステップで変化を表現する

📌 CSSトランジションの基礎

1. 基本構文

.element {
  transition: プロパティ 時間 イージング 遅延;
}

2. 例：ボタンをホバーしたときに色が変わる

button {
  background: #3498db;
  color: #fff;
  padding: 10px 20px;
  border: none;
  transition: background 0.3s ease; /* 0.3秒かけて色が変わる */
}

button:hover {
  background: #2ecc71;
}

👉 transition を指定しないと、色が一瞬で切り替わります。
👉 transition を使うと なめらかに色が変化 します。

📌 CSSアニメーションの基礎

1. 基本構文

.element {
  animation: 名前 時間 イージング 繰り返し;
}

2. アニメーションの流れを定義（@keyframes）

@keyframes move {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(0); }
}

3. 例：四角が左右に動くアニメーション

.box {
  width: 50px;
  height: 50px;
  background: #e74c3c;
  animation: move 2s infinite;
}

@keyframes move {
  0% { transform: translateX(0); }
  50% { transform: translateX(200px); }
  100% { transform: translateX(0); }
}

👉 この例では、赤い四角が左右に動きを繰り返します。

🎨 トランジションとアニメーションの違い

💡 よく使うプロパティ

トランジション

• transition-property → 変化させたいCSSプロパティ
• transition-duration → 変化にかける時間
• transition-timing-function → イージング（ease, linear, ease-in, ease-out）
• transition-delay → 遅延時間

アニメーション

• animation-name → アニメーション名
• animation-duration → 再生時間
• animation-iteration-count → 再生回数（infiniteで無限ループ）
• animation-direction → normal, reverse, alternate など

⚠️ 初心者がつまずきやすいポイント

• transition は 状態変化がないと動かない
• animation は ループさせるか、一度だけにするか を明示する必要がある
• ブラウザによって微妙に挙動が違う場合がある（特に古いブラウザ）

📌 まとめ

• トランジション → 状態変化をなめらかに表現
• アニメーション → 複雑な動きを繰り返し表現
• ボタンやリンクには「トランジション」、ローディングやバナーには「アニメーション」が最適
• @keyframes を理解すると自由自在に動きを作れる

👉 関連記事

• [CSS変数（カスタムプロパティ）の使い方]
• [レスポンシブデザインの基礎と実装方法]