CSSリファレンス

transitionの意味と使い方

トランジションのプロパティを一括して指定するには、transitionプロパティを使います。それぞれの値を任意の順番で、半角スペースで区切って指定します。
ただし、transition-durationプロパティとtransition-delayプロパティの値については、1つ目の指定されている値がtransition-durationプロパティの値、2つ目に指定されている値がtransition-delayの値とみなされます。省略した値については、初期値が適用されます。
複数のプロパティを変化させる場合は、それぞれに対応する値のセットを「,」で区切って記述します。

値の指定方法

transition-propertyの値

トランジション効果を適用するプロパティを指定します。


transition-durationの値

変化にかける時間を指定します。


transition-delayの値

プロパティの値が変更されてから変化が開始されるまでの待機時間を指定します。


transition-timing-functionの値

変化する速度のパターンを指定します。


関連プロパティ

  • transition-property:トランジション効果をつける
  • transition-duration:トランジションにかける時間を指定する
  • transition-timing-function:トランジションの速度のパターンを指定する
  • transition-delay:トランジションを遅れて開始させたい