transition-duration用于設(shè)置CSS過渡效果的持續(xù)時間，取值為秒（s）或毫秒（ms），常與transition-property和timing-function配合使用，可簡寫為transition。例如：button{transition:background-color 0.3s ease;}實現(xiàn)背景色0.3秒平滑變化。支持為多個屬性設(shè)置不同持續(xù)時間，如width 0.5s、height 0.8s。需配合:hover等觸發(fā)條件生效，默認值為0s，僅適用于可漸變屬性如顏色、尺寸等，非連續(xù)屬性如display不支持過渡。合理使用可提升界面交互流暢性。

在CSS中，transition-duration 屬性用于定義元素從一種樣式過渡到另一種樣式所花費的時間。換句話說，它控制動畫的持續(xù)時間。如果希望某個屬性變化（比如顏色、寬度、位置等）不是立即完成，而是平滑地進行，就可以使用這個屬性。

基本語法

transition-duration: 0.5s; transition-duration: 200ms; transition-duration: 1s;

與 transition 搭配使用

例如，讓一個按鈕的背景色在 0.3 秒內(nèi)平滑變化：

button {
  background-color: blue;
  transition-property: background-color;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
<p>button:hover {
background-color: red;
}</p>

更簡潔的寫法是使用 transition 簡寫：

立即學(xué)習(xí)“前端免費學(xué)習(xí)筆記（深入）”；

button {
  background-color: blue;
  transition: background-color 0.3s ease;
}
<p>button:hover {
background-color: red;
}</p>

為多個屬性設(shè)置不同持續(xù)時間

例如，寬度變化用 0.5 秒，高度用 0.8 秒：

美間AI

美間AI：讓設(shè)計更簡單

45

查看詳情

.box {
  width: 100px;
  height: 100px;
  transition-property: width, height;
  transition-duration: 0.5s, 0.8s;
}
<p>.box:hover {
width: 200px;
height: 150px;
}</p>

注意事項

transition-duration 默認值是 0s，意味著沒有延遲，變化立即完成。

只有能“漸變”的屬性才支持過渡，比如顏色、尺寸、透明度等。像 display 這類非連續(xù)屬性無法過渡。

基本上就這些。合理使用 transition-duration 能讓界面交互更自然流暢。

以上就是在css中如何用transition-duration控制過渡時間的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！