CSS3 トランジション

CSS3 トランジション（Transitions）を使用すると、プロパティの値を一定の時間にわたって、滑らかに変更（ある状態から別の状態へ変化）させることができます。

1. CSS3 トランジションの使用方法

トランジション効果を作成するには、以下の 2 つを指定する必要があります。

1. 効果を追加したい CSS プロパティ
2. 効果の持続時間（Duration）

注意: 時間（Duration）の部分を指定しなかった場合、デフォルト値が 0 であるため、トランジション効果は発生しません。

1.1 基本的なトランジションの例

以下の例では、width プロパティに対して 2 秒間のトランジション効果を適用しています。

div {
  width: 100px;
  height: 100px;
  background: red;
  /* 幅の変化を2秒間で行う */
  transition: width 2s;
}

/* マウスホバー時に幅を300pxに変更 */
div:hover {
  width: 300px;
}

トランジション効果は、指定した CSS プロパティの値が変更されたときに開始されます。一般的なトリガーは、ユーザーが要素にマウスを合わせた（:hover）ときです。マウスを要素から離すと、プロパティは徐々に元のスタイルに戻ります。

2. 複数のプロパティ値を変更する

複数のプロパティに対してトランジション効果を追加する場合は、各プロパティをカンマ（,）で区切って指定します。

2.1 複数指定のコード例

以下の例では、width と height の両方にトランジションを追加し、それぞれ異なる時間を設定しています。

div {
  width: 100px;
  height: 100px;
  background: red;
  /* 幅に2秒、高さに4秒のトランジションを設定 */
  transition: width 2s, height 4s;
}

div:hover {
  width: 300px;
  height: 300px;
}

3. トランジションのスピード曲線（Speed Curve）を指定する

transition-timing-function プロパティを使用すると、トランジションの速度変化（イージング）を指定できます。

以下の主要な値を使用可能です。

• ease: ゆっくり始まり、その後速くなり、ゆっくり終わる（デフォルト値）。
• linear: 開始から終了まで同じ速度。
• ease-in: ゆっくり始まる。
• ease-out: ゆっくり終わる。
• ease-in-out: ゆっくり始まり、ゆっくり終わる。
• cubic-bezier(n,n,n,n): 独自の速度曲線を定義可能。

3.1 タイミング関数の比較例

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

4. トランジションの遅延（Delay）

transition-delay プロパティを使用すると、トランジション効果が開始されるまでの待機時間を指定できます。

4.1 遅延設定の例

以下の例では、変化が始まる前に 1 秒間の遅延を設定しています。

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
  /* 1秒待ってから開始 */
  transition-delay: 1s;
}

div:hover {
  width: 300px;
}

^{5. トランジション + トランスフォーム}

トランジションは、トランスフォーム（Transform）プロパティと組み合わせることで、よりダイナミックな効果を発揮します。

5.1 回転とサイズ変更の複合例

以下の例では、要素のサイズ変更と同時に 180 度の回転を加えています。

div {
  width: 100px;
  height: 100px;
  background: red;
  /* transformも含めて2秒間のトランジション */
  transition: width 2s, height 2s, transform 2s;
}

div:hover {
  width: 300px;
  height: 300px;
  /* 右回りに180度回転 */
  transform: rotate(180deg);
}

6. ショートハンドプロパティ

トランジションに関する各プロパティは、transition という 1 つのショートハンドプロパティにまとめて記述することができます。

6.1 ショートハンドの構文

記述順序は以下の通りです。
transition: property duration timing-function delay;

div {
  /* widthに対し、2秒間、linear、0.5秒遅延の設定を一括指定 */
  transition: width 2s linear 0.5s;
}

7. トランジションプロパティ一覧

CSS トランジションを使いこなすことで、JavaScript に頼ることなく、洗練されたインタラクションを最小限のコードで実装できます。特に transform プロパティ（scale や rotate）との組み合わせは、モダンな UI デザインにおける標準的な手法となっています。