「ボタンの色がふわっと変わる」「画像にゆっくりズームがかかる」など、なめらかな変化をCSSで簡単に実現したいと思ったことはありませんか？
そんなときに役立つのが CSSのtransition（トランジション）プロパティ です。この記事では、transitionの基本とよく使うパターンを初心者向けに解説します。

transitionとは？

transitionは、CSSプロパティの変化に「時間的な動き（アニメーション）」をつけるためのプロパティです。
マウスオーバーやクラスの変更などによって発生する変化を、なめらかに見せることができます。

基本構文

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

例：transition: all 0.3s ease;（すべてのプロパティを0.3秒かけて変化）

よく使うパターン

① ボタンの背景色をふわっと変化

.btn {
  background: #ff9999;
  transition: background 0.3s ease;
}

.btn:hover {
  background: #ff6666;
}

② 画像にズーム効果をつける

.image {
  transition: transform 0.5s ease;
}

.image:hover {
  transform: scale(1.1);
}

③ 複数プロパティを同時に変化

.box {
  transition: background 0.3s ease, color 0.5s linear;
}

.box:hover {
  background: #000;
  color: #fff;
}

補足：よく使うイージング

• ease：自然なスピード（開始と終了がゆるやか）
• linear：一定のスピードで変化
• ease-in：開始がゆっくり
• ease-out：終了がゆっくり
• ease-in-out：開始と終了がゆっくり

おわりに

transitionを活用すれば、サイトの印象をぐっと洗練されたものにできます。
最初はbackgroundやtransformから試して、徐々に組み合わせていくと感覚がつかめますよ。