transition-propertyプロパティ
プロパティtransition-propertyは、
スムーズな遷移transitionでアニメーション化される
プロパティを設定します。値としてアニメーション化するCSSプロパティの
名前を渡す必要があります。値allを設定すると（これがデフォルトです）、
全てのプロパティが同時にアニメーション化されます。
構文
セレクター {
transition-property: 値;
}
例
ボックスの上にマウスを乗せると、その幅がスムーズに変化します。
これはtransition-propertyの値がwidthになっているためです：
<div id="elem"></div>
#elem {
border: 1px solid black;
transition-duration: 2s;
transition-property: width;
height: 50px;
width: 100px;
}
#elem:hover {
width: 400px;
}
:
例 . all値
この例ではtransition-propertyの値がallになっているため、
hover状態で指定された全てのプロパティ（この場合はwidthとheight）が
スムーズに変化します。全ての変化はtransition-durationで
設定された同じ時間で行われます：
<div id="elem"></div>
#elem {
border: 1px solid black;
transition-duration: 2s;
transition-property: all;
height: 25px;
width: 100px;
}
#elem:hover {
height: 50px;
width: 400px;
}
:
関連項目
-
スムーズな遷移の持続時間を設定するプロパティ
transition-duration -
スムーズな遷移の開始前に遅延を設定するプロパティ
transition-delay -
スムーズな遷移のタイミング関数を設定するプロパティ
transition-timing-function -
スムーズな遷移の一括指定プロパティ
transition -
アニメーションを作成できるプロパティ
animation
