在現代網頁設計中，平滑的過渡效果是提升用戶體驗的關鍵因素之一。CSS transitions 為我們提供了一種簡單而強大的方式來實現元素在不同狀態之間的平滑過渡，而 transition-duration 屬性則是控制這些過渡效果時長的核心工具。本文將全面探討 transition-duration 的使用方法、最佳實踐以及一些高級技巧。

1. 什么是transition-duration？

transition-duration 是CSS過渡屬性之一，它定義了過渡效果從開始到完成所需的時間。換句話說，它控制了你的動畫應該以多快的速度完成。

.element {transition-property: width;transition-duration: 0.5s; /* 過渡將持續0.5秒 */
}

2. 基本語法

transition-duration 的語法非常簡單：

transition-duration: time;

其中，time 可以表示為秒（s）或毫秒（ms）：

• 1s = 1000ms
• 0.5s = 500ms
• 200ms = 0.2s

3. 使用示例

3.1 單個屬性的過渡

.box {width: 100px;height: 100px;background-color: blue;transition-property: width;transition-duration: 2s;
}.box:hover {width: 300px;
}

在這個例子中，當鼠標懸停在盒子上時，寬度將在2秒內從100px平滑過渡到300px。

3.2 多個屬性的不同過渡時間

.box {width: 100px;height: 100px;background-color: blue;transition-property: width, height, background-color;transition-duration: 1s, 0.5s, 2s;
}.box:hover {width: 200px;height: 150px;background-color: red;
}

這里我們為三個不同的屬性設置了不同的過渡時間：

• 寬度變化：1秒
• 高度變化：0.5秒
• 背景色變化：2秒

4. 選擇合適的過渡時間

選擇適當的過渡時間對于創造自然的用戶體驗至關重要：

1. 快速交互反饋：按鈕點擊、懸停效果等通常需要較短的過渡時間（100ms-300ms）
2. 顯著的狀態變化：模態框出現、頁面過渡等可以使用稍長時間（300ms-500ms）
3. 背景或裝飾性動畫：可以更長一些（500ms-1000ms+）

5. 性能考慮

雖然CSS transitions通常性能很好，但仍有幾點需要注意：

1. 避免過長的過渡時間：超過1秒的過渡可能會讓用戶感到不耐煩
2. 硬件加速：對transform和opacity屬性的過渡通常性能最佳
3. 減少同時過渡的屬性數量：同時動畫太多屬性可能導致性能問題

6. 與其它transition屬性的結合

transition-duration 通常與其它過渡屬性一起使用：

.element {transition-property: all;transition-duration: 0.3s;transition-timing-function: ease-in-out;transition-delay: 0.1s;/* 簡寫形式 */transition: all 0.3s ease-in-out 0.1s;
}

7. 響應式設計中的transition-duration

你可以根據設備特性調整過渡時間：

.button {transition-duration: 0.3s;
}@media (prefers-reduced-motion: reduce) {.button {transition-duration: 0s;}
}

這尊重了用戶的運動偏好設置，為對動畫敏感的用戶提供更好的體驗。

8. 動態修改transition-duration

通過JavaScript，你可以動態改變過渡時間：

element.style.transitionDuration = '0.5s';

或者使用CSS變量實現更靈活的控制：

:root {--transition-time: 0.3s;
}.element {transition-duration: var(--transition-time);
}

document.documentElement.style.setProperty('--transition-time', '0.5s');

9. 常見問題與解決方案

9.1 過渡效果不生效

• 檢查是否設置了transition-property
• 確認目標屬性是可過渡的（不是所有CSS屬性都支持過渡）
• 確保有觸發過渡的狀態變化（如:hover）

9.2 過渡效果不流暢

• 嘗試減少同時過渡的屬性數量
• 考慮使用will-change屬性提示瀏覽器優化
• 檢查是否在過渡布局相關屬性（如width/height），這些屬性性能開銷較大

9.3 過渡時間不一致

• 確保沒有沖突的CSS規則覆蓋你的過渡設置
• 檢查是否有更具體的選擇器設置了不同的過渡時間

10. 高級技巧

10.1 階梯式動畫

通過設置多個過渡時間，可以創建復雜的動畫序列：

.element {transition-property: opacity, transform, color;transition-duration: 0.2s, 0.4s, 0.6s;transition-delay: 0s, 0.2s, 0.4s;
}

10.2 與JavaScript動畫配合

element.style.transitionDuration = '0s';
element.style.opacity = 0;
// 強制重繪
void element.offsetWidth;
element.style.transitionDuration = '1s';
element.style.opacity = 1;

這種技術可以防止初始狀態被動畫化。

10.3 檢測過渡結束

element.addEventListener('transitionend', function(event) {console.log('Transition ended:', event.propertyName);
});

11. 瀏覽器兼容性

transition-duration 在現代瀏覽器中有很好的支持：

• Chrome 26+
• Firefox 16+
• Safari 6.1+
• Edge 12+
• Opera 12.1+

對于舊版瀏覽器，可以考慮使用前綴或漸進增強策略。

12. 結論

transition-duration 是創建流暢、響應式用戶界面的強大工具。通過精心選擇的過渡時間，你可以顯著提升用戶體驗，使界面交互更加自然和直觀。記住，最好的過渡效果是那些用戶幾乎注意不到但卻顯著改善體驗的效果——它們不應該分散注意力，而應該幫助用戶理解界面狀態的變化。

掌握 transition-duration 的使用，結合適當的 transition-timing-function 和 transition-delay，你將能夠創造出專業級的動畫效果，為你的網站或應用增添精致的觸感。