CSS3過渡功能允許CSS屬性值的更改在指定的持續(xù)時間內(nèi)平穩(wěn)發(fā)生。
通常，當(dāng)CSS屬性的值更改時，呈現(xiàn)的結(jié)果會立即更新。一個常見的示例是更改鼠標(biāo)懸停時按鈕的背景顏色。在正常情況下，將光標(biāo)放在按鈕上時，按鈕的背景顏色會立即從舊屬性值更改為新屬性值。
CSS3引入了一項(xiàng)新的過渡功能，使您可以隨時間平滑地將屬性從舊值動畫化為新值。
以下示例將向您展示如何background-color在鼠標(biāo)懸停時對HTML按鈕的動畫。
button {
background: #fd7c2a;
/* For Safari 3.0+ */
-webkit-transition-property: background;
-webkit-transition-duration: 2s;
transition-property: background;
transition-duration: 2s;
}
button:hover {
background: #3cc16e;
}測試看看?/?您必須至少指定兩個屬性transition-property和transition-duration（大于0），以使它們產(chǎn)生過渡效果。但是，所有其他過渡屬性都是可選的，因?yàn)樗鼈兊哪J(rèn)值不會阻止過渡的發(fā)生。
注意：并非所有CSS屬性都是可動畫的。通常，任何接受數(shù)字，長度，百分比或顏色值的CSS屬性都是可動畫的。
每個過渡屬性都可以采用多個值，并用逗號分隔，這提供了一種輕松的方法來一次定義具有不同設(shè)置的多個過渡。
button {
background: #fd7c2a;
border: 3px solid #dc5801;
/* For Safari 3.0+ */
-webkit-transition-property: background, border;
-webkit-transition-duration: 1s, 2s;
transition-property: background, border;
transition-duration: 1s, 2s;
}
button:hover {
background: #3cc16e;
border-color: #288049;
}測試看看?/?應(yīng)用過渡時要考慮許多屬性。但是，也可以在一個屬性中指定所有過渡屬性以縮短代碼。
過渡屬性是一種簡寫屬性，用于按列出的順序一次設(shè)置所有單個過渡屬性（即縮寫屬性transition-property，transition-duration，transition-timing-function和transition-delay在所列出的順序）。
使用此屬性時，請務(wù)必對值遵循此順序。
button {
background: #fd7c2a;
-webkit-transition: background 2s ease-in 0s; /* For Safari 3.0+ */
transition: background 2s ease-in 0s;
}
button:hover {
background: #3cc16e;
}測試看看?/?注意：如果缺少或未指定任何值，則將使用該屬性的默認(rèn)值。這意味著，如果transition-duration缺少屬性的值，則不會發(fā)生過渡，因?yàn)槠淠J(rèn)值為0。
下表簡要概述了所有過渡屬性：
| 屬性 | 描述 |
|---|---|
| transition | 用于在單個聲明中設(shè)置所有四個單獨(dú)過渡屬性的簡寫屬性。 |
| transition-delay | 指定何時開始過渡。 |
| transition-duration | 指定過渡動畫完成所需的秒數(shù)或毫秒數(shù)。 |
| transition-property | 指定應(yīng)將過渡效果應(yīng)用到的CSS屬性的名稱。 |
| transition-timing-function | 指定如何計算受過渡影響的CSS屬性的中間值。 |