CSSトランジション（Transitions）の使い方

Posted on by

CSSトランジションは、要素のスタイルが変化する際にスムーズなアニメーションを提供するためのテクニックです。要素がホバーやクリックなどのイベントでスタイルが変更されるとき、トランジションを使うことで変化が滑らかに行われるようになります。

基本的なトランジションの設定

トランジションを設定するためには、transition プロパティを使用します。このプロパティには、遷移するプロパティ（例: width, height, color など）とアニメーションの時間やイージング関数を指定します。

/* 要素にトランジションを設定 */
.hoge {
  transition: width 0.3s ease-in-out;
}

/* マウスホバー時にプロパティを変更 */
.hoge:hover {
  width: 200px;
}

上記の例では、.hoge 要素の幅がホバーすることでスムーズに変化します。
トランジションの時間は 0.3s で、イージング関数は ease-in-out を使用しています。

トランジションのプロパティ

トランジションを制御するために使用できる主なプロパティは以下の通りです。

  • transition-property: トランジションが適用されるプロパティを指定します。複数のプロパティを指定することもできます。
  • transition-duration: トランジションが完了するまでの時間を指定します。
  • transition-timing-function: アニメーションの進行を制御するイージング関数を指定します。
  • transition-delay: トランジションが開始するまでの遅延時間を指定します。

複数のプロパティへのトランジション

複数のプロパティにトランジションを適用することもできます。

.hoge {
  transition: width 0.3s ease-in-out, color 0.3s ease-in-out;
}

.hoge:hover {
  width: 200px;
  color: red;
}

上記の例では、幅とテキストの色の両方にトランジションが適用され、ホバー時にスタイルが変化します。

イージング関数の選択

イージング関数はアニメーションの進行を制御します。
一般的なものには ease, ease-in, ease-out, ease-in-out などがありますが、カスタムのイージング関数を使用することもできます。

.hoge {
  transition: width 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

まとめ

CSSトランジションは、ウェブページにスムーズなアニメーションを追加するのに役立つ強力なテクニックです。
要素のスタイルが変化する際に、ユーザーエクスペリエンスを向上させるためにぜひ活用してみてください。