Animation

11. トランジションとアニメーション

transitionはホバー時の滑らかな変化、@keyframesは複雑なアニメーションを実現します。
JavaScript無しでリッチなUIを作成できます。

🎮 Transition プレイグラウンド ボックスをホバーしてみて
0.3s
Hover Me
.box {
  transition: all 0.3s ease;
}
.box:hover {
  transform: scale(1.2);
}

イージング関数の比較

各バーをホバーして、イージングの違いを体感してください。

linear
ease
ease-in
ease-out
ease-in-out

@keyframes アニメーションギャラリー

ボタンをクリックすると、各アニメーションが再生されます。

Click
bounce
Click
spin
Click
pulse
Click
shake
Click
color shift

📌 覚えておきたいポイント

  • transitionは状態A→状態Bの変化を滑らかにする
  • @keyframesは複数のステップを持つアニメーションを定義
  • animation-fill-mode: forwardsでアニメーション終了時の状態を維持
  • cubic-bezier()でカスタムイージングを作成可能
  • prefers-reduced-motionでアクセシビリティに配慮