2022/2/27 （更新日: 2022/2/28）

【徹底解説】transitionプロパティの使い方をマスターしよう！【CSS】

CSS

transitionプロパティが今いちよくわからない…

そんな悩みにお答えします。

「hoverのときによく使うけど実は使い方がよくわかっていない」

「いつもコピペで済ましている」

そんなことはありませんか？

僕は最初あやふやな理解のまま、いつもコピペして使っていました。

だから、何がどうなんだっけ？っていつも忘れてました。

でもWeb制作をするにあたってtransitionプロパティはまず間違いなく使うプロパティです。

ですのできちんと理解しておくことが必要です。

一度しっかり覚えればあとは使っていくうちに慣れていきますので、この機会に使い方をしっかりマスターしておきましょう。

transitionプロパティとは？

要素のスタイルの変化（アニメーション開始地点とアニメーション終了地点）する速度を調整します。

軽めのスタイル変化で、手軽にアニメーションさせるときによく使われます。

たとえばボタンではhover時に文字色と背景色をなめらかに変化させるために使われます。

transition プロパティの記述方法

transition プロパティは４つのプロパティを一括で指定できるCSSです。

transition構成要素のプロパティ

transition-property：アニメーション対象の CSS プロパティ名
transition-duration：アニメーション時間（変化の開始から終了までの時間）
transition-timing-function：アニメーション変化の度合
transition-delay：アニメーション開始までの遅延時間

記述の方法は以下のとおり各値を半角スペースで区切って指定します。

transition: color 1s ease-out 2s;

この記述方法をショートハンド（一括指定）といいます。

上記を各プロパティごとに記述するとこうなります。

transition-property: color;
transition-duration: 1s;
transition-timing-function: ease-out;
transition-delay: 2s;

これらはどちらも同じ指定です。

transition-property

アニメーションを適用する CSS のプロパティ名を指定します。

初期値は「all」のため何も記述しなかった場合も「all」になります。

「all」を指定した場合、意図しないセレクタにまで transition が適用される場合があります。

よってアニメーションさせたいプロパティが明確な場合はtranstion-property でプロパティ名を記述したほうが良いです。

ここの動きの違いを見てみましょう。

「all」を指定の場合

↓マウスホバー

サンプル1

<div class="transition-property1">サンプル1</div>

.transition-property1 {
  width: 200px;
  color: #fff;
  background-color: #00CC99;
  padding: 1em;
  cursor: pointer;
  text-align: center;
  transition-property: all; // すべてを指定
  transition-duration: 1s;
  transition-timing-function: ease;
  transition-delay: 0s;
}

.transition-property1:hover {
  width: 400px;
  color: #333;
  background-color: tomato;
}

「width」「color」「background-color」のすべてに指定のアニメーションが適用されていることがわかります。

「background-color」のみを指定の場合

↓マウスホバー

サンプル2

<div class="transition-property2">サンプル2</div>

.transition-property2 {
  width: 200px;
  color: #fff;
  background-color: #00CC99;
  padding: 1em;
  cursor: pointer;
  text-align: center;
  transition-property: background-color; // 特定のプロパティ名を指定
  transition-duration: 1s;
  transition-timing-function: ease;
  transition-delay: 0s;
}

.transition-property2:hover {
  width: 400px;
  color: #333;
  background-color: tomato;
}

「background-color」のみにアニメーションが適用されていることがわかります。

transition-duration

アニメーション開始から終了までの時間を指定します。

ここの動きの違いを見てみましょう。

「0.5s」を指定の場合

↓マウスホバー

サンプル3

<div class="transition-property3">サンプル3</div>

.transition-property3 {
  width: 200px;
  color: #fff;
  background-color: #00CC99;
  padding: 1em;
  cursor: pointer;
  text-align: center;
  transition-property: all;
  transition-duration: 0.5s; // 開始から終了までが0.5秒
  transition-timing-function: ease;
  transition-delay: 0s;
}

.transition-property3:hover {
  width: 400px;
}

「3s」を指定の場合

↓マウスホバー

サンプル4

<div class="transition-property4">サンプル4</div>

.transition-property4 {
  width: 200px;
  color: #fff;
  background-color: #00CC99;
  padding: 1em;
  cursor: pointer;
  text-align: center;
  transition-property: all;
  transition-duration: 3s; // 開始から終了までが3秒
  transition-timing-function: ease;
  transition-delay: 0s;
}

.transition-property4:hover {
  width: 400px;
}

両者の変化の差がわかります。

transition-timing-function

変化の仕方を指定します。

transition-timing-function プロパティ

ease（初期値）: 開始と完了を滑らかに変化（省略可）
linear : 速度が変わることなく一定に変化
ease-in : 開始時はゆっくり、終了時は早く変化
ease-out : 開始時は早く、終了時はゆっくり変化
ease-in-out : easeよりさらに、開始時と終了時はゆっくり変化

ease

linear

ease-in

ease-out

ease-in-out

上図はグレーのエリアをマウスオーバーすることで動きます。

アニメーション開始から終了までの時間を「transition-duration: 3s」で指定しています。

それぞれの動きの違いがわかると思います。

transition-delay

アニメーションが開始するまでの遅延時間を指定します。

初期値は「0」のため指定していない場合は、アニメーションがすぐに開始されます。

「3s」を指定の場合

↓マウスホバー

サンプル5

<div class="transition-delay1">サンプル5</div>

.transition-delay1 {
  width: 200px;
  color: #fff;
  background-color: #00CC99;
  padding: 1em;
  cursor: pointer;
  text-align: center;
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease;
  transition-delay: 3s; // 3秒後に開始
}

.transition-delay1:hover {
  width: 400px;
}

アニメーション開始までに3秒かかっているのがわかります。

transition プロパティの使い方

transition プロパティは上記4つのプロパティ（「transition-property」「transition-duration」「transition-timing-function」「transition-delay」）のショートハンドです。

つまり、まとめて記述することができます。

💡ポイント！　transitionの書き方

transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
各値を半角スペースで区切って指定

例としては以下のとおりです。

↓マウスホバー

サンプル6

<div class="transition1">サンプル6</div>

.transition1 {
  width: 200px;
  color: #fff;
  background-color: #00CC99;
  padding: 1em;
  cursor: pointer;
  text-align: center;
  transition: all 1s ease-in-out 0s; // ショートハンド
}

.transition1:hover {
  width: 400px;
  color: #333;
  background-color: tomato;
}

transition プロパティの記述のポイント

ポイント1

transition の各プロパティは省略可能です。

省略した場合はそれぞれの初期値が適用されます。

💡ポイント！　各プロパティの初期値

transition-property: none;
transition-duration: 0s
transition-timing-function: ease;
transition-delay: 0s;

ポイント2

transition プロパティの記述の順番には特に決まりはありません。

ただし、「transition-duration」「transition-delay」については順番が関係します。

数値を2つ記述する場合、1番目の値が「transition-duration」、2番目の値が「transition-delay」となる決まりです。

たとえば「transition: all 1s ease 2s」と指定した場合、transition-durationが「1秒」でtransition-delayが「2秒」となります。

ポイント3

アニメーション効果を適用するプロパティが複数ある場合、カンマ区切りで transition-property を複数指定できます。

（例）

transition: color 3s, background-color 2s ;

ポイント4

transition プロパティは hover などの擬似クラスではなく通常時のセレクタに指定します。

通常時のセレクタの方は、状態変化前のプロパティを指定します。

hover などトリガーとなるセレクタには、状態変化後のプロパティを指定します。

（例）

<a href="#" class="button">ボタン</a>

.button {
  cursor: pointer;
  display: block;
  width: 160px;
  padding: 1em;
  text-align: center;
  text-decoration: none;
  color: #fff;
  // 状態変化前のプロパティ
  background: #00CC99;
　// アニメーション設定
  transition: background 1s ease 0s;
}
.button:hover {
  // 状態変化後のプロパティ
  background: #333;
}