HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

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

      2018/02/22   hatano

transition(トランジション)プロパティとは

指定したプロパティを:hover擬似クラスなどを使い時間で変化させるプロパティです。CSSを使った簡単なアニメーションを作成することができます。
※ベンダープレフィックスは不要
※Internet Explorerは11から対応

transitionの各ブラウザの対応状況
Can I use -transition-

transitionを指定するポイントは、変化後に指定するのではなく、変化前に指定することです。
下記は、マウスを重ねると幅がアニメーションします。transitionの指定を:hover側ではなく変化前に指定しています。

マウスオーバーで幅が変化

transition(トランジション)プロパティ

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

複数のプロパティを指定する場合は値のセットをカンマで区切ります。下記は先ほどのコードにbackground-colorを追加した例です。

マウスオーバーで幅と背景色が変化

transition-property(トランジション-プロパティ)プロパティ

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

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

注意点として背景画像(background-image)は、transitionで変化させることができません。他にも線形グラーデーション(liner-gradient)、円形グラーデーション(radial-gradient)も変化させることができません。

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

transition-duration(デュレーション)プロパティ

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

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

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

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

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

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

各値の変化の確認は「Easing Functions Cheat Sheet 」で確認することができます。

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

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

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

下記は、先ほどのコードに幅のサイズが変わってから、background-colorの変化が始まるようにした例です。

マウスオーバーで幅が変化、その後、背景色が変化

まとめ

  • ransitionは、ショートハンドを使った指定方法。
  • transitionの各値は、半角スペースで区切る。
  • transition-propertyは、効果を適用するプロパティ名の指定。必須。
  • transition-durationは、変化が終わるまでの時間の指定。初期値は0s。
  • transition-timing-functionは、イージングの設定。初期値はease。
  • transition-delayは、変化が始まる時間の指定。初期値は0s。

広告

 - HTML・CSS