CSS設置過度時間可以讓網頁元素有一個平緩的過渡效果，增強用戶體驗。下面我們來看看怎樣設置過度時間。

/* 為所有的元素設置過渡效果 */
* {
transition: all 0.3s ease;
}
/* 設置指定元素的過渡效果 */
.element {
transition: width 1s ease-in-out;
}
/* 設置不同屬性的過渡時間 */
.element {
transition-property: width, height;
transition-duration: 2s, 1s;
}
/* 設置觸發過渡的事件 */
.element {
transition-property: width;
transition-duration: 1s;
transition-delay: 0.5s;
transition-timing-function: ease-in-out;
}
/* 在偽類中使用過渡效果 */
.element:hover {
transition: background-color 0.5s ease-in-out;
}

通過設置不同的屬性，過渡時間和觸發事件，我們來達到生成不同的過渡效果。當我們需要在偽類中使用過渡效果的時候，只需要在偽類里面定義需要過渡的屬性即可。