CSSのtransitionプロパティ：プロパティ変化を滑らかに演出する方法

CSSのtransitionプロパティは、プロパティの変化にアニメーション効果を追加するために使用されます。
このプロパティを活用することで、ウェブサイトのデザインに動きを加え、
ユーザー体験を向上させることができます。
本記事では、transitionプロパティの基本的な使い方から応用例までを詳しく解説します。

transitionプロパティとは？

transitionプロパティを使用すると、指定したCSSプロパティの変化が
一定の時間をかけてスムーズに実行されるようになります。
これにより、インタラクティブでダイナミックなデザインを簡単に作成できます。

基本構文

selector {
  transition: property duration timing-function delay;
}

各パラメータの説明

1. property（プロパティ）：変化の対象となるCSSプロパティ（例：color, opacity, transform）。
   allを指定すると、すべてのプロパティが対象になります。
2. duration（時間）：アニメーションの継続時間を指定（例：1s, 500ms）。
3. timing-function（タイミング関数）：変化の速度を指定
   （例：ease, linear, ease-in, ease-out, ease-in-out）。
4. delay（遅延）：アニメーションを開始するまでの待機時間（例：0s, 200ms）。

基本的な使い方

色の変化を滑らかに

colorプロパティの変化にアニメーションを追加します。

コード例

button {
  color: black;
  transition: color 0.5s ease;
}

button:hover {
  color: red;
}

結果

マウスホバー時にテキストの色が0.5秒かけて赤に変化します。

背景色の変化を滑らかに

background-colorプロパティにtransitionを適用します。

コード例

div {
  background-color: lightblue;
  transition: background-color 1s ease-in-out;
}

div:hover {
  background-color: lightgreen;
}

結果

背景色が1秒かけて青から緑に変化します。

透明度の変化を滑らかに

opacityプロパティを対象にした例です。

コード例

img {
  opacity: 0.5;
  transition: opacity 0.8s linear;
}

img:hover {
  opacity: 1;
}

結果

マウスホバー時に画像の透明度が徐々に不透明になります。

応用的な使い方

複数プロパティの変化を指定

複数のCSSプロパティにアニメーションを適用する場合、カンマで区切ります。

コード例

div {
  background-color: lightblue;
  transform: scale(1);
  transition: background-color 0.5s, transform 0.5s;
}

div:hover {
  background-color: lightgreen;
  transform: scale(1.2);
}

結果

背景色の変化と同時に、要素が1.2倍に拡大します。

アニメーションの遅延を追加

delayを使用してアニメーションの開始時間を遅らせます。

コード例

button {
  background-color: lightblue;
  transition: background-color 0.5s ease-in 0.3s;
}

button:hover {
  background-color: lightgreen;
}

結果

マウスホバー後、0.3秒遅れて背景色が変化します。

デフォルト値を適用

transitionプロパティを親要素で指定して、子要素にも適用します。

コード例

.container {
  transition: all 0.4s ease;
}

.container div:hover {
  transform: translateX(20px);
}

結果

子要素がマウスホバー時に右に滑らかに移動します。

タイミング関数の詳細

タイミング関数（timing-function）は、アニメーションの速度をカスタマイズするために使用されます。

主なタイミング関数

• ease：デフォルト値。変化の速度がスムーズに加速と減速します。
• linear：一定の速度で変化。
• ease-in：ゆっくり始まり、加速する。
• ease-out：速く始まり、減速する。
• ease-in-out：ゆっくり始まり、ゆっくり終わる。
• cubic-bezier(n, n, n, n)：カスタムカーブ。

コード例

div {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  transition: transform 1s cubic-bezier(0.25, 0.1, 0.25, 1);
}

div:hover {
  transform: rotate(45deg);
}

よくある質問

Q1. transitionが動作しない原因は？

対象のCSSプロパティがアニメーション可能であるか確認してください
（例：width, height, opacityなど）。
プロパティ値の初期設定が必要です。

Q2. アニメーションを一時停止するには？

transitionを一時的に無効化するには、transition: none;を適用します。

Q3. hover以外のイベントで使用できますか？

可能です。focusやactive、checkedなどの疑似クラス、
またはJavaScriptによるクラス操作でも使用できます。

例

div {
  background-color: lightblue;
  transition: background-color 0.5s;
}

div:focus {
  background-color: lightgreen;
}

ベストプラクティス

適切なプロパティを選ぶ
allを避け、必要なプロパティを明示的に指定することで、パフォーマンスを向上させます。

タイミング関数を活用
ユーザー体験を向上させるため、ease-in-outやcubic-bezierを試してください。

過剰なアニメーションを避ける
動きが多すぎると、ユーザーに負担を与える可能性があります。

まとめ

CSSのtransitionプロパティを使うことで、デザインに動きを加え、
視覚的に魅力的なウェブサイトを作成できます。
本記事で紹介した基本的な使い方や応用テクニックを活用し、
ユーザー体験を向上させるアニメーションを実現してください。

特に、タイミング関数や遅延を工夫することで、より洗練された動きを演出することができます。

Favorite