CSSアニメーション応用編｜transitionと@keyframesで動きを付ける

CSSアニメーションを活用すると、要素のホバー演出や画面遷移時のフェードインなど、ページに自然な動きを加えられます。基本的なプロパティを理解しておくことで、ユーザーにとって見やすく使いやすいデザインを構築できます。

CSSアニメーションには大きく分けて transition と @keyframes の2種類があり、それぞれ異なる場面で役立ちます。本記事では両者の使い方や違いを整理し、実際にページで活用できるサンプルとともに解説します。

アニメーションを扱う前に、CSSの余白やレイアウトの基礎を理解しておくと設計がスムーズになります。
関連内容：

• CSSのmarginとpaddingの違いを徹底比較｜余白設定のコツ
• FlexboxとGridの基礎｜レスポンシブレイアウトを理解する

1. transitionで状態変化に動きを付ける

transition は、「ある状態から別の状態に変化するタイミング」で動きを付けたい場合に使います。
代表例として、ホバー時の色変更や大きさ変更などがあります。

● 基本構文

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

例：

.box {
  background: #ccc;
  transition: background-color 0.3s ease;
}

.box:hover {
  background: #ff9900;
}

上記のスタイルでは、ホバーした瞬間に背景色がふんわり変化します。

● transitionが向いているケース

• ホバー時の色やサイズの変化
• ナビゲーションメニューの反応
• アコーディオンやトグルでの「開く／閉じる」の自然な変化

2. @keyframesで複雑な動きを作る

@keyframes は、開始から終了までの動きを細かく定義できるアニメーションです。
複数ステップの動きを作りたいときに便利です。

● 基本構文

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.item {
  animation: fadeIn 1s ease forwards;
}

この例では、ページ読み込み時に要素がふんわりと表示されます。

● @keyframesが向いているケース

• スライドイン・フェードインなどのページ読み込み演出
• ボタンの注意喚起など、連続したアニメーション
• パルス・回転・バウンドなどの複雑な動き

CSSアニメーションの基礎を復習したい場合は以下も参考になります。
関連内容：

• CSSでサイズ指定を理解する｜px・em・remの違い
• CSSリセットの基本｜ブラウザ差異をなくす方法

3. transition と @keyframes の違い

両者は目的が異なるため、場面に応じて使い分けることが大切です。

4. 実践サンプル

● ホバーでふんわり拡大（transition）

.card {
  transform: scale(1);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: scale(1.05);
}

シンプルですが、視覚的な操作性を向上させる効果があります。

● スライドイン表示（@keyframes）

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.section {
  animation: slideIn 0.8s ease forwards;
}

ページ表示時に自然な動きで要素が現れます。

5. アニメーションを設計する際のポイント

アニメーションは使いすぎると読み込み体験を損なう場合があります。適切な場面で最小限の動きを付けることで、自然でストレスのないUIになります。

● 設計時の注意点

• 動きの時間は短すぎず長すぎず、0.2〜0.6秒が目安
• 目的が曖昧な装飾的アニメーションは控える
• 要素が多い場合はパフォーマンスに影響するため注意

Webページ全体のパフォーマンス改善については以下も参考になります。
関連内容：

• CSSが反映されないときの原因と対処法まとめ
• WordPressで安全に出力するためのエスケープ関数まとめ

6. まとめ

CSSアニメーションは、transition と @keyframes を用途に応じて使い分けることで、視覚的にわかりやすいインターフェイスを作ることができます。

• 状態変化に動きを付ける → transition
• 複数ステップの動きを作る → @keyframes
• 過度なアニメーションは避け、必要な部分だけに適用することが重要

基礎を理解しながら実際にコードを試すことで、表現の幅が大きく広がります。