CSSのtransitionと@keyframesの違いとUI改善の実例

はじめに

WebサイトやアプリケーションのUIを改善する上で、アニメーションは重要な役割を果たします。CSSには主に transition と @keyframes の2種類の手法があり、それぞれ得意分野が異なります。本記事では両者の違いを整理し、実際のUI改善事例を紹介します。

transitionとは

• 状態の変化をなめらかにするための仕組み
• トリガー（例: hover, focus, classの追加/削除）が必要
• シンプルな効果に向いている

使用例：ボタンのホバー効果

button {
  background: #2c7be5;
  transition: background 0.3s ease, transform 0.2s ease;
}
button:hover {
  background: #1a5bb8;
  transform: scale(1.05);
}

→ ユーザーがホバーしたときにスムーズに色やサイズが変化

@keyframesとは

• 複雑なアニメーションを定義できる仕組み
• トリガーが不要で、自動再生も可能
• 複数段階の動きを制御可能

使用例：ローディングアニメーション

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.loader {
  width: 40px;
  height: 40px;
  border: 4px solid #ccc;
  border-top-color: #2c7be5;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

→ ページ読み込み中に回転するローダーを実装

使い分けの指針

• transition: 簡単な状態変化（ボタン、リンク、フォームUIの微妙な動き）
• @keyframes: 複雑な動き（ローディング、スライドイン、フェードインシーケンス）

UI改善の実例

1. フォームエラーの強調

input:invalid {
  border-color: #e53935;
  transition: border-color 0.3s ease;
}

→ 入力エラー時に滑らかに赤枠へ変化し、ユーザーの注意を自然に引ける

2. ヒーローヘッダーのフェードイン

@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
.hero {
  animation: fadeIn 1s ease-out;
}

→ ページ読み込み時に見出しが柔らかく現れ、第一印象を向上

まとめ

• transition は「状態変化を滑らかにする」シンプルな効果に最適
• @keyframes は「連続的・複雑な動き」を作りたいときに強力
• UI改善では、適材適所で両者を組み合わせることで、快適で直感的な操作体験を提供できる