transition プロパティ

プロパティ transition はスムーズな遷移のための一括指定で、 transition-duration、 transition-property、 transition-timing-function および transition-delay を 同時に指定することができます。

構文

cssセレクタ {
  transition: 値;
}

プロパティの順序は重要ではありませんが、 実行時間（transition-duration）は 遅延時間（transition-delay）よりも 前に記述する必要があります。

値

対応する各プロパティを参照してください。 デフォルト値は all 0s ease 0s です。

値 none はすべての遷移をキャンセルします （遷移は瞬時に行われます）。

例

ブロックにマウスを乗せると、3秒間は何も起こりません（3秒の遅延が設定されています）。その後、2秒かけて幅が滑らかに変化します。マウスを離すと、再び3秒間は何も起こらず、その後幅が元の値まで滑らかに縮小します：

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

css#elem {
  border: 1px solid black;
  transition: width 2s ease 3s;
  width: 100px;
  height: 50px;
}
#elem:hover {
  width: 400px;
}

Результат:

関連項目