transition-propertyプロパティ

プロパティtransition-propertyは、 スムーズな遷移transitionでアニメーション化される プロパティを設定します。値としてアニメーション化するCSSプロパティの 名前を渡す必要があります。値allを設定すると（これがデフォルトです）、 全てのプロパティが同時にアニメーション化されます。

構文

cssセレクター {
  transition-property: 値;
}

例

ボックスの上にマウスを乗せると、その幅がスムーズに変化します。 これはtransition-propertyの値がwidthになっているためです：

html<div id="elem"></div>

css#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で 設定された同じ時間で行われます：

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  transition-duration: 2s;
  transition-property: all;
  height: 25px;
  width: 100px;
}
#elem:hover {
  height: 50px;
  width: 400px;
}

Результат:

関連項目