• CSS
• #animation
• #CSS応用
• #transition

CSSトランジション vs アニメーション：違いと使い分け

CSSトランジション vs アニメーション：違いと使い分け

CSSで「動き」を作る方法には transition と animation の2種類があります。どちらも見た目の変化をスムーズにするための機能ですが、目的や使い方には明確な違いがあります。この記事では、それぞれの特徴と使い分け方を分かりやすく解説します。

transitionの基本と使い方

transition は、ある状態から別の状態に変化する際にアニメーション効果を加えるプロパティです。主に :hover や :focus などのイベントと組み合わせて使用します。

基本構文

.btn-button {
  background-color: #3498db;
  border-radius: 0.4em;
  padding: 0.5em 1.5em;
  transition: background-color 0.3s ease;
}

.btn-button:hover {
  background-color: #1abc9c;
}

.btn-button {
  background-color: #3498db;
  border-radius: 0.4em;
  padding: 0.5em 1.5em;
  transition: background-color 0.3s ease;
}

.btn-button:hover {
  background-color: #1abc9c;
}

この例では、マウスホバー時にボタンの色が滑らかに変わります。

主なプロパティ

• transition-property：変化させたいプロパティ
• transition-duration：変化にかける時間
• transition-timing-function：変化の速度カーブ
• transition-delay：変化を開始するまでの遅延時間

animationの基本と使い方

animation は、@keyframes で定義した動きを自動的に再生・繰り返すことができるプロパティです。
ユーザー操作がなくても動かせるのが特徴です。

基本構文

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.ball {
  width: 50px;
  height: 50px;
  background: #f39c12;
  border-radius: 50%;
  animation: bounce 1s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.ball {
  width: 50px;
  height: 50px;
  background: #f39c12;
  border-radius: 50%;
  animation: bounce 1s ease-in-out infinite;
}

このコードでは、オレンジの円が上下に弾むように動き続けます。

主なプロパティ

• animation-name：再生する@keyframes名
• animation-duration：アニメーションの再生時間
• animation-timing-function：再生速度のカーブ
• animation-iteration-count：繰り返し回数
• animation-direction：再生方向（normal, reverseなど）

transitionとanimationの違い

実践：transitionとanimationを組み合わせる

両者を組み合わせることで、よりリッチなUI演出が可能です。

例：発光するボタン

<a href="#" class="btn-glow">Glow Button</a>

<a href="#" class="btn-glow">Glow Button</a>

.btn-glow {
  display: inline-block;
  padding: 12px 24px;
  color: #fff;
  background: #3498db;
  border-radius: 6px;
  transition: transform 0.2s;
  animation: glow 2s ease-in-out infinite;
}

.btn-glow:hover {
  transform: translateY(-4px);
}

@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 5px #3498db;
  }
  50% {
    box-shadow: 0 0 20px #5dade2;
  }
}

.btn-glow {
  display: inline-block;
  padding: 12px 24px;
  color: #fff;
  background: #3498db;
  border-radius: 6px;
  transition: transform 0.2s;
  animation: glow 2s ease-in-out infinite;
}

.btn-glow:hover {
  transform: translateY(-4px);
}

@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 5px #3498db;
  }
  50% {
    box-shadow: 0 0 20px #5dade2;
  }
}

ワンポイントアドバイス

hover効果や動く背景など、transitionとanimationをバランスよく使うと、動きのあるデザインが生まれます。目的に応じて最適な方を選びましょう。