“transition-property”プロパティ:遷移効果の対象プロパティ｜CSS－havin' a coffee break

＃

概要

初期値	“transition-property: all;”
適用対象	すべての要素
継承	No
パーセント値	パーセント値は指定できません
計算値	CSS識別子もしくは“none”をアイテムとするリスト
アニメーション	不可

“transition-property”プロパティは“transition-duration”プロパティなどで指定された要素に適用されているプロパティの値が変化した時に遷移効果の対象となるプロパティを指定するプロパティです。

既定では値が変化したすべてのプロパティが遷移効果の対象となりますが、“transition-property”プロパティによって対象となるプロパティを限定したり、プロパティごとに遷移効果の細かな設定を行うことができます。

“transition-property”プロパティで遷移効果の対象となるプロパティを限定した場合、対象としないプロパティは遷移効果が適用されず、値の変化が直ちに反映されます。

サンプルコード



div { transition-property: 5s;}

＃

値

値	説明
“<single-transition-property>”値
<custom-ident>	遷移効果の対象となるプロパティ名を表す識別子を指定します
all	値が変化するすべてのプロパティが遷移効果の対象になります
他の値
none	どのプロパティも遷移効果の対象になりません
共通キーワード

一括指定プロパティを遷移効果の対象として指定した場合、その一括指定プロパティが対象とするすべての個別指定プロパティが遷移効果の対象として指定されたように扱われます。

“all”は“all”プロパティのプロパティ名と重複しますが、効果は同じであり、区別されません。

＃

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

“animation-property”プロパティの値を“,(コンマ)”で区切ったリストとして記述することで遷移効果の対象となるプロパティを複数指定することができます。

“transition-duration”プロパティなどの他の遷移効果のためのプロパティも同様にコンマで区切ることで複数の値のリストとすることができ、それぞれのプロパティの値は記述された順番通りに“animation-property”プロパティの値として記述されたプロパティの遷移効果に対応します。



div {


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

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

 transition-timing-function: 〚1個目のプロパティのイージング〛,〚2個目のプロパティのイージング〛,〚3個目のプロパティのイージング〛,...;


}