【CSS入門】transitionで要素を簡単アニメーション

この記事では時間的変化を指定するCSSのtransitionに関連するプロパティについて解説します。

transitionとは？

時間的変化を一括指定できるショートハンドです。プロパティの値は順不同で半角スペース区切りで指定でき、transition-duration（変化の時間）以外は省略して書く事も出来ます。

省略した値はそのプロパティのデフォルト値が適用されます。transition-property(適用プロパティ名)を省略すると、指定されているすべての値に対して時間的変化が設定されます。

CSS

transition: 適用プロパティ名 変化の時間 変化の仕方 変化までの時間;
 
transition: color 0.5s ease-in-out 0s;

transitonを定義した要素に対してhover時の値を設定することで、アニメーションしながら値を変化させます。

transitionプロパティ詳細

transitionで使用するプロパティは以下の通りです。

transition-property

transition効果を適用するプロパティ（background-colorなど）を指定します。

transition-propertyに指定できる値は以下の通りです。

実際に使用するときは以下のように記述します。

この場合「ホバーするとwidthが250pxから300pxになる」と指定したことになります。

HTML

<div class="BOX"></div>

CSS

.BOX{
  width:250px;
  height:250px;
  transition-property: width;
}

/*transitonの最終値は:hoverに書く*/
.BOX:hover{
  width: 300px;
}

transition-duration

durationとは日本語で「時間の期間」という意味で、transition効果の開始から完了までにかかる時間を指定します。

transition-durationに指定できる値は以下の通りです。

実際に使用するときは以下のように記述します。

この場合「ホバーすると3秒かけてwidthが250pxから300pxになる」と指定したことになります。

HTML

<div class="BOX"></div>

CSS

.BOX{
  width:250px;
  height:250px;
  transition-property: width;
  transition-duration: 3s;
}

/*transitonの最終値は:hoverに書く*/
.BOX:hover{
  width: 300px;
}

transition-timing-function

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

transition-timing-functionに指定できる値は以下の通りです。

実際に使用するときは以下のように記述します。

HTML

<div class="BOX-A"></div>
  <div class="BOX-B"></div>

CSS

/* デフォルト */
.BOX-A{
  width:250px;
  height:250px;
  transition-property: width;
  transition-duration: 3s;
}

.BOX-A:hover{
  width: 300px;
}

/* ease-in（ゆっくり始まる） */
.BOX-B{
  width:250px;
  height:250px;
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: ease-in;
}

.BOX-B:hover{
  width: 300px;
}

transition-delay

delayとは日本語で「遅らせる」という意味で、transition効果が開始されるまでの待ち時間を指定します。

マイナスの値を指定すると、変化が完了した時点から開始します。transition-delayに指定できる値は以下の通りです。

実際に使用するときは以下のように記述します。

この場合、「ホバーまで2秒待機してからwidthが250pxから300pxになるよ」と指定したことになります。

HTML

<div class="BOX-A"></div>
  <div class="BOX-B"></div>

CSS

/* デフォルト */
.BOX-A{
  width:250px;
  height:250px;
  transition-property: width;
}

.BOX-A:hover{
  width: 300px;
}

/* 2秒後に開始 */
.BOX-B{
  width:250px;
  height:250px;
  transition-property: width;
  transition-delay: 2s;
}

.BOX-B:hover{
  width: 300px;
}

まとめ

このプロパティは、要素の変化を指定するtransformと一緒に使われる事が多いので、そちらも勉強するようにしましょう。

CSS関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。