在現(xiàn)代Web開發(fā)中，CSS3動畫越來越流行。與JavaScript相比，CSS3動畫的優(yōu)勢是可以輕松創(chuàng)建流暢且高效的動畫效果，而不必寫冗長的代碼。而其中一個關(guān)鍵的參數(shù)——transition-duration（過度時間）則可以控制動畫效果的持續(xù)時間。

.container {
width: 200px;
height: 200px;
background-color: #ccc;
transition-property: background-color;
transition-duration: 0.5s; /* 設(shè)置過度時間為0.5秒 */
}
.container:hover {
background-color: #f00; /* 鼠標(biāo)懸浮時觸發(fā)動畫效果 */
}

在上面的代碼中，我們創(chuàng)建了一個擁有變色效果的容器，當(dāng)鼠標(biāo)懸浮在容器上時，背景顏色會從灰色平滑過渡為紅色。過度時間的設(shè)置可以通過transition-duration屬性來完成，單位為秒或毫秒。在這個例子中，我們將過度時間設(shè)置為0.5s，表示背景顏色的變化效果會持續(xù)半秒鐘。

需要注意的是，過度時間不是動畫執(zhí)行的總時間，而是單次過渡的時間。如果一個元素同時設(shè)置了多個屬性的過渡效果，那么過渡時間會按照最長的那個屬性來計算。此外，如果過度時間設(shè)置為0s，那么該屬性將不會執(zhí)行過渡效果，而直接變?yōu)樾轮怠?/p>

總的來說：transition-duration是CSS3動畫中非常重要的一個參數(shù)，可以控制動畫效果的持續(xù)時間。通過靈活使用它，我們可以創(chuàng)造出高效、流暢的動畫效果。