transition 是 css 中用于實現元素樣式漸變過渡的屬性，通過指定屬性、持續時間、時間函數和延遲來控制動畫效果。基本用法是：在 css 中為元素定義 transition 屬性，并結合狀態變化（如 hover）觸發過渡，例如按鈕懸停變色。html 主要提供結構和類名，使 css 能夠定位目標元素并應用過渡。常見問題包括屬性不支持過渡、初始或目標值不明確、未正確觸發變化等。使用技巧有：按需指定具體屬性以提升性能，或添加 delay 參數實現延遲動畫。
過渡效果在網頁設計中很常見，比如按鈕懸停變色、菜單展開收縮這些平滑的動畫效果，其實大多是通過 CSS 的 transition 屬性實現的。HTML 本身不直接處理動畫，但它是結構基礎，和 CSS 配合才能讓過渡動起來。
transition 是什么？怎么用？
transition 簡單來說就是控制元素從一種樣式漸變到另一種樣式的過程。它不是瞬間變化，而是有個過程，比如顏色、大小、位置的變化都可以加過渡。
基本寫法是這樣的：
立即學習“前端免費學習筆記（深入）”；
.element { transition: property duration timing-function delay; }
例如：
.button { background-color: blue; transition: background-color 0.3s ease; } .button:hover { background-color: darkblue; }
這樣當鼠標移到按鈕上時，背景色就會在 0.3 秒內慢慢變深。
HTML 怎么配合 transition？
HTML 主要是提供結構和類名，讓 CSS 能找到目標元素來添加過渡效果。比如一個按鈕的 HTML 可能是：
<button class="btn">點擊我</button>
然后在 CSS 中給 .btn 類加上 transition 和狀態變化的樣式，比如 hover 或 active 狀態。
.btn { background: #4CAF50; transition: background 0.2s ease; } .btn:hover { background: #45a049; }
所以 HTML 不需要寫 JS 或復雜結構，只要類名正確，CSS 就能通過選擇器控制過渡。
常見問題：為什么 transition 沒有效果？
有時候寫了 transition 卻沒反應，可能是這幾個原因：
- 屬性不能過渡：像 display、visibility 這種開關式屬性是不能加過渡的。可以用 opacity 或 height 來替代。
- 初始值或目標值不明確：比如從 auto 到具體數值，瀏覽器不好計算中間過程，就可能跳過過渡。
- 沒有觸發變化：過渡只會在樣式發生變化時生效，如果只是設置了 transition 但沒改變任何樣式，也不會有動畫。
- 忘記加瀏覽器前綴（現代瀏覽器一般不需要了），不過如果你要兼容舊版瀏覽器，可以考慮加上 -webkit-、-moz- 等。
transition 動畫的小技巧
有時候你想讓多個屬性都過渡，可以簡寫成這樣：
transition: all 0.3s ease;
但這樣做會把所有可過渡的屬性都加動畫，可能會帶來性能影響或者意料之外的效果。建議還是按需指定具體的屬性更好。
還有一種情況是想讓動畫延遲一點開始，比如加載完成后再動一下，這時候就可以用 delay 參數：
transition: opacity 0.5s ease 0.2s;
表示等 0.2 秒后，再用 0.5 秒完成透明度變化。
基本上就這些，transition 不難，但要讓它順滑自然，還得注意細節。
