{ transition-duration 【 トランジション・デュレーション 】 : 時間; }

transition-durationプロパティは、トランジションが完了するまでの時間を指定します。指定した時間内で徐々に変化が進行していきます。

初期値	0s
継承	なし
適用される要素	すべての要素、:before、:after疑似要素
モジュール	CSS Transitions

値の指定方法

時間

任意の数値＋単位	変化の完了までにかかる時間を数値で指定します。単位はs（秒）、ms（ミリ秒）が使えます。カンマ（,）で区切って複数指定できます。

サンプルコード

.box{
  border: 1px solid red;
  background-color: aqua;
}
.box:hover{
  transition-property: background-color;
  transition-duration: 3s;
  background-color: yellow;
}