CSS3 過度時間

/* 設置過度時間 */
transition: property duration timing-function delay;
/* 屬性 */
transition-property: none | all | propertyname1, propertyname2, ...;
/* 過度時間 */
transition-duration: time;
/* 過度函數 */
transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);
/* 延遲時間 */
transition-delay: time;

CSS3 過度時間是指在一個樣式值改變時，通過一段時間實現平滑的過渡效果。常用于實現頁面的動態效果，如鼠標懸停時顏色的漸變、圖片的縮放等等。

上述代碼展示了設置過度時間的語法格式。其中，transition屬性可以用來簡寫所有的過渡屬性：屬性、過度時間、過度函數、延遲時間。具體解釋如下：

/* 具體屬性取值 */
/* 可以設置過渡的 CSS 屬性。默認是 "all" 即所有屬性都可過渡 */
transition-property: none | all | propertyname1, propertyname2, ...;
/* 過渡時間。默認是 0，沒有過渡效果 */
transition-duration: time;
/* 時間函數。默認是 "ease" */
transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);
/* 過渡效果的延遲時間。默認是 0 */
transition-delay: time;

值得注意的是，屬性值是可縮寫的，如只寫屬性和過渡時間的過渡，可以簡寫為：

/* 簡寫 */
/* 過渡屬性和時間 */
transition: property duration;

使用 CSS3 過度時間，可以讓頁面動態效果更加美觀，如果有需要可以先實現靜態效果，再用過度時間使其更加生動和有趣。