transition プロパティ

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

構文

セレクタ {
	transition: 値;
}

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

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

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

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

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

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