⌘K

transition-durationプロパティ

transition-durationプロパティは、 transitionのスムーズな遷移の実行時間を設定します。

構文

cssセレクタ {
  transition-duration: sまたはmsでの時間;
}

値

値 説明
s 秒単位で時間を指定します（例: 3s）。 小数値も指定可能です。 例えば、0.5sは0.5秒です。
ms ミリ秒単位で時間を指定します（例: 3ms）。 1秒は1000ミリ秒です。

デフォルト値: 0s。

例

ブロックにマウスを乗せると、幅が2秒かけてスムーズに変化します。 

html<div id="elem"></div>
css#elem {
  transition-duration: 2s;
  transition-property: width;
  border: 1px solid black;
  height: 50px;
  width: 100px;
}
#elem:hover {
  width: 400px;
}

Результат:

関連項目

  • トランジションの対象となるプロパティ名を指定する transition-propertyプロパティ
  • トランジション開始前の遅延時間を指定する transition-delayプロパティ
  • トランジションのタイミング関数を指定する transition-timing-functionプロパティ
  • トランジションの一括指定プロパティである transitionプロパティ
  • アニメーションを作成できる animationプロパティ
Back疑似要素first-lineNextプロパティ transition-delay