応用64.プロパティを時間で変化させるプロパティ（transition）

transition（トランジション）プロパティ

transitionをショートハンドで指定する場合に使うプロパティ。
値の指定は、
transitionするプロパティ(transition-property)
変化の時間(transition-duration)
イージング(transition-timing-function)
変化が始まる時間(transition-delay)
の順で指定する必要があります。各値は半角スペースで区切ります。
transition-propertyのみ必須で、それ以外のプロパティは値を指定しない場合、初期値が使用されます。しかし、transition-durationの初期値は0なので変化が発生しません。transition-durationも必ず指定しましょう。

複数のプロパティを指定する場合は値のセットをカンマで区切ります。下記は先ほどのコードにbackground-colorを追加した例です。
※iOS Safaraiではタップで処理を実行する場合、ontouchstart=””が必要です。

<div class="transition02" ontouchstart="">マウスオーバーで幅と背景色が変化</div>

.transition02{
  cursor: pointer;
  width: 300px;
  height: 60px;
  line-height: 60px;
  background-color: #ddd;
  transition:
    width 1s ease-out,
    background-color 0.5s linear;
}
.transition02:hover{
  width: 500px;
  background-color: #333;
}

transition-property（トランジション-プロパティ）プロパティ

transition効果を適用するプロパティ名の指定です。transition使う場合の必須プロパティとなり、省略できません。
対象は、すべての要素、before疑似要素、after疑似要素に指定できるプロパティです。その他の値は下記になります。

• none …すべてのプロパティにtransitionを行わない。解除に利用。
• all …すべてのプロパティが対象

複数指定の場合は、値をカンマで区切ります。

注意点として背景画像（background-image）は、transitionで変化させることができません。
そのため、背景画像だけでなく、線形グラーデーション（liner-gradient）、円形グラーデーション（radial-gradient）も変化させることができません。

div{
  transition-property: width, background-color;
}

transition-duration（デュレーション）プロパティ

変化が終わるまでの所要時間の指定。初期値は、0s（0秒）。必須ではありませんが、指定しない場合、transitionが発生しないので必ず指定します。値は1sが1秒となり、細かい時間指定を小数点で指定することができます。

• 0.5s … 0.5秒
• 1.2s … 1.2秒

複数指定の場合は、値をカンマで区切ります。

div{
  transition-duration: 1s, 0.5s;
}

transition-timing-function（トランジション-タイミング-ファンクション）プロパティ

開始から終了までのイージング（加速度）、時間の変化の設定です。定義済みのイージングには、下記の値があります。

• ease（初期値）…開始と終了がゆるやか
• linear …開始から終了まで同じスピード
• ease-in …開始ゆるやか、終了に向かって加速。
• ease-out …開始は加速、修了に向かって減速。
• ease-in-out …easeより開始と終了がゆるやか

複数指定の場合は、値をカンマで区切ります。

div{
  transition-timing-function: ease-out, linear;
}

transition-delay(トランジション-ディレイ）プロパティ

変化が始まる時間の指定。transition-timing-functionを発生させるタイミングを遅らせることができます。
初期値は0s（0秒）。複数指定の場合は、値をカンマで区切ります。

div{
  transition-delay: 0, 1s;
}

下記は、先ほどのコードに幅のサイズが変わってから、background-colorの変化が始まるようにした例です。
※iOS Safaraiではタップで処理を実行する場合、ontouchstart=””が必要です。

<div class="transition03" ontouchstart="">マウスオーバーで幅が変化、その後、背景色が変化</div>

.transition03{
  cursor: pointer;
  width: 300px;
  height: 60px;
  line-height: 60px;
  background-color: #ddd;
  transition:
    width 1s ease-out,
    background-color 0.5s linear 1s;
}
.transition03:hover{
  width: 500px;
  background-color: #333;
}