【CSSアニメーション】transitionプロパティの使い方解説

HTML / CSS のコーディング練習で、あまり理解せずに transition プロパティを使用してしている方は多いのではないでしょうか？
「コード写経で、とりあえず transition 入れているけど理解が曖昧だな」という方は、この記事を見るだけで、transition プロパティを使いこなせるようになります。

本記事でわかることは以下の通りです。

transition プロパティとは？

そもそも「transition」という英単語は、「遷移」「変化」「移行」などの意味があります。
CSS の transition プロパティも同様で、開始と終了の2点間の「変化」を設定することができます。

つまり、要素のスタイルを始点（アニメーション開始地点）と、終点（アニメーション終了地点）で、どのように変化させるか？を表すプロパティです。

そのため、軽めのスタイル変化で、手軽にアニメーションさせるときに良く使用されます。
例えば、「ボタンを hover した時、ボタンの色とテキストの色をゆっくり変化させたい」場合に transition プロパティが使われます。

transition プロパティの記述方法

transition プロパティは、以下4つのプロパティのショートハンド（一括指定）です。

実際の記述方法は、以下のように各値を半角スペースで区切って指定します。

transition を正しく設定するためには各プロパティの理解が必要のため、以降で各プロパティの説明をしていきます。

transition-property

transition-property は、アニメーションを適用する CSS のプロパティ名を指定します。
例えば、「transtion-property: color;」とした場合は transition によるアニメーションの対象は「color」の文字色のみになります。

全てのプロパティを対象とする場合は、「transtion-property: all;」と指定します。初期値は「all」のため、何も記述しなかった場合も「all」になります。
「all」を指定した場合、意図しないセレクタにまで transition が適用される場合があるので、アニメーションさせたいプロパティが明確の場合は、transtion-property でプロパティ名を記述したほうが良いです。

それでは、具体的にコードを見ていきます。

<a class="button" href="#!">Button</a>

.button {
  border: 1px solid black;
  border-radius: 10px;
  display: inline-block;
  font-weight: bold;
  margin: 20px;
  padding: 20px 40px;
  text-decoration: none;

  background-color: grey;
  color: black;

  /* アニメーション設定 */
  transition-property: color;
  transition-duration: 3s;
}

.button:hover {
  background-color:blue;
  color:white;
}

疑似クラス hover で、background-color と color の両方を指定し、transtion-property プロパティには color だけを指定します。
上記コードでは、以下の動画のようになります。

transtion-property に color だけを指定しているため、color だけ、ゆっくりと色が変わっています。
しかし、background-color の方は、パッと色が変わっています。

次に、transtion-property に background-color も追加してみます。

.button {
  border: 1px solid black;
  border-radius: 10px;
  display: inline-block;
  font-weight: bold;
  margin: 20px;
  padding: 20px 40px;
  text-decoration: none;

  background-color: grey;
  color: black;

  /* アニメーション設定 */
  transition-property: color, background-color;
  transition-duration: 3s;
}

.button:hover {
  background-color:blue;
  color:white;
}

今度は以下の動画のようになり、background-color と color の両方がゆっくりと色が変化するようになりました。

transition-duration

transition-duration は、アニメーション開始から終了までの時間(秒またはミリ秒)を指定します。
例えば、「transition-duration: 3s;」とした場合は、アニメーションが完了するまでの時間を3秒として設定しています。

初期値は「0」のため、transition-duration を指定しない場合は、アニメーションは即時に完了し、パッと切り替わったように見えます。
さっそくコードを見ていきます。

.button {
  border: 1px solid black;
  border-radius: 10px;
  display: inline-block;
  font-weight: bold;
  margin: 20px;
  padding: 20px 40px;
  text-decoration: none;

  background-color: grey;
  color: black;

  /* アニメーション設定 */
  transition-property: color, background-color;
  transition-duration: 5s;
}

.button:hover {
  background-color:blue;
  color:white;
}

上記コードでは、「transition-duration: 5s;」と指定しているため、アニメーションの開始から終了までの時間を5秒としています。
そのため、以下の動画のように background-color と color は5秒かけてゆっくりと色が変化します。

transition-timing-function

transition-timing-function は、transition-durationで指定した時間内の変化の仕方を指定します。
transition-timing-function で指定できる主な値は以下の通りです。

下記の動画は、transition-timing-function を指定したボックスが横移動しています。
横移動の仕方を見比べることで、変化の仕方の違いが分かります。

transition-delay

transition-delay は、アニメーションが開始するまでの遅延時間を指定します。
つまり、指定した時間が経過してから変化が始まるようになります。

transition-duration と同じように初期値は「0」のため、指定していない場合は、アニメーションが即座に開始されます。

.button {
  border: 1px solid black;
  border-radius: 10px;
  display: inline-block;
  font-weight: bold;
  margin: 20px;
  padding: 20px 40px;
  text-decoration: none;

  background-color: grey;
  color: black;

  /* アニメーション設定 */
  transition-property: color, background-color;
  transition-duration: 5s;
  transition-delay: 2s;
}

.button:hover {
  background-color: blue;
  color: white;
}

上記のコードでは、「transition-delay: 2s;」と指定しているため、ボタンに hover してから２秒後にアニメーションが開始しています。

transition プロパティの使い方

transition プロパティは、上記4つのプロパティのショートハンド（一括指定）です。

実際の記述方法は、以下のように各値を半角スペースで区切って指定します。

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

具体的には以下のようなコードになります。
このコードでは、「button」クラスの要素の文字色が hover 時に5秒かけて黒から白に変化していきます。

<a class="button" href="#!">Button</a>

.button {
  /* アニメーション設定 */
  transition: color 5s ease 0s;

  /* 状態変化前のプロパティ */
  color: black;
}

.button:hover {
  /* 状態変化後のプロパティ */
  color: white;
}

各プロパティは省略可能、記述の順番は任意

transition の各プロパティは、省略することも可能です。省略した場合はそれぞれの初期値が適用されます。

また、transition プロパティの記述の順番は特に決まりはありませんが、transition-duration と transition-delay に関しては記述順序に注意が必要です。
数値を２つ並べた場合、1番目の値が transition-duration となり、2番目の値が transition-delay となります。
例えば、「transition: 1s 5s;」と指定した場合は、transition-duration が「1s」、transition-delay が「5s」となります。

transition に複数プロパティも指定可能

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

まとめ

最後にまとめておきます。