CSSリファレンス

transition-propertyの意味と使い方

トランジション(遷移)とは、あるスタイルを別のスタイルへ滑らかに変化させる効果です。視覚的な変化をFlashやJavaScriptを使用せずに実現することができます。
トランジションでは、プロパティの値を変化させることで効果を実現します。そのため次の指定が必要です。
・効果を適用するプロパティと、その開始時の値と完了時の値
・変化にかける時間
トランジション効果を適用するプロパティは、transition-propertyプロパティで指定し、変化にかける時間はtransition-durationプロパティで指定します。

値の指定方法

none

変化するプロパティはありません。


all

トランジション効果を適用できる、すべてのプロパティを変化させます。


プロパティ名

変化させるプロパティの名前を指定します。複数のプロパティを変化させる場合は、それぞれを「,」で区切って記述します。


関連プロパティ

  • transition-duration:トランジションにかける時間を指定する
  • transition-timing-function:トランジションの速度のパターンを指定する
  • transition-delay:トランジションを遅れて開始させたい
  • transition:トランジションのプロパティを一括指定する