“transition-delay”プロパティ:遷移効果の遅延時間｜CSS－havin' a coffee break

＃

概要

初期値	“transition-delay: ease;”
適用対象	すべての要素
継承	No
パーセント値	パーセント値は指定できません
計算値	指定した所要時間をアイテムとするリスト
アニメーション	不可

“transition-delay”プロパティは“transition-duration”プロパティなどで指定された要素に適用されているプロパティの値が変化した時に遷移が開始するまでの遅延時間を指定するプロパティです。

サンプルコード



div { transition-delay: 5s;}

＃

値

値	説明
<time>	“s”や“ms”で遷移が開始するまでの遅延時間を指定します (負の値を指定した場合、遷移はすぐに開始されますが、指定された時間が経過した時点から遷移が開始します。)
0s	遷移はすぐに開始されます
共通キーワード

＃

複数のプロパティの遷移効果を指定する

“transition-property”プロパティで複数のプロパティの遷移効果が指定されている場合、値を“,(コンマ)”で区切って記述することでそれぞれの遷移を開始するまでの遅延時間を指定することができます。値の順番は“transition-property”プロパティで指定した値の順番に対応します。



div {


 transition-duration: 〚1個目のプロパティの所要時間〛,〚2個目のプロパティの所要時間〛,〚3個目のプロパティの所要時間〛,...;

 transition-property: 〚1個目のプロパティ〛,〚2個目のプロパティ〛,〚3個目のプロパティ〛,...;

 transition-delay: 〚1個目のプロパティの遅延時間〛,〚2個目のプロパティの遅延時間〛,〚3個目のプロパティの遅延時間〛,...;


}