eye catch

Webデザイン

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

2022年2月22日

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

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

  • transition 構成要素のプロパティ
  • transition プロパティの記述方法と使い方

transition プロパティとは?

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

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

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

transition プロパティの記述方法

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

transtion 構成要素のプロパティ

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

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

transition: color 3s linear 1s;

/* transition 指定と同じ意味 */
transition-property: color;
transition-duration: 3s;
transition-timing-function: linear;
transition-delay: 1s;

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 プロパティ

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

下記の動画は、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 してから2秒後にアニメーションが開始しています。

transition プロパティの使い方

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

transition: <property> <duration> <timing-function> <delay>;

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

transition: color 3s linear 1s;

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

使用時のポイント

  • 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 に関しては記述順序に注意が必要です。
数値を2つ並べた場合、1番目の値が transition-duration となり、2番目の値が transition-delay となります。
例えば、「transition: 1s 5s;」と指定した場合は、transition-duration が「1s」、transition-delay が「5s」となります。

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

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

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

まとめ

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

  • transition プロパティは下記4つのショートハンド(一括指定)
    • transition-property
    • transition-duration
    • transition-timing-function
    • transition-delay
  • transition の書き方
    transition: <property> <duration> <timing-function> <delay>;
  • transition プロパティの使用ポイント
    • transition プロパティは通常時のセレクタに指定する
    • 通常時のセレクタの方は、状態変化前のプロパティを指定する
    • hover などトリガーとなるセレクタには、状態変化後のプロパティを指定する

-Webデザイン
-,

© 2022 みやっちブログ