transition-timing-function 控制網頁元素過渡的快慢節奏，常見類型有 1.ease（默認值，先慢后快再慢）2.linear（勻速過渡）3.ease-in（開始慢逐漸加快）4.ease-out（開始快結束前減慢）5.ease-in-out（整體平滑，開頭結尾放緩），例如 button { transition: background-color 0.3s ease-in; } 可實現按鈕 hover 時慢慢變色，自定義曲線使用 cubic-bezier() 并通過在線工具調整參數，如 cubic-bezier(0.25, 0.1, 0.25, 1) 等價于 ease，多個屬性需分別設置對應函數，如 transition-Property、transition-duration、transition-timing-function 的順序要一一對應以避免錯誤。
在網頁設計中，過渡效果能讓界面更流暢自然。而 transition-timing-function 就是用來控制這個“過渡過程”快慢節奏的關鍵屬性。簡單說，它決定了元素從一個狀態變到另一個狀態時，中間的動畫怎么動。
常見的 timing function 類型
瀏覽器內置了一些常用的過渡函數，可以直接使用：
- ease：默認值，先慢后快再慢，適合大多數情況
- linear：勻速過渡，從頭到尾速度一樣
- ease-in：開始慢，之后逐漸加快
- ease-out：開始快，結束前減慢
- ease-in-out：整體比較平滑，開頭和結尾都放緩
比如你想讓按鈕在 hover 時慢慢變色，但不要一開始太突兀，可以這樣寫：
立即學習“前端免費學習筆記（深入）”；
button { transition: background-color 0.3s ease-in; }
自定義過渡曲線：cubic-bezier()
如果你對默認的幾種不滿意，可以用 cubic-bezier() 來自定義過渡曲線。它的參數是四個數字，代表貝塞爾曲線的兩個控制點，比如：
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
這個例子其實等價于默認的 ease。你可以去一些在線工具（比如 cubic-bezier.com）調出想要的效果，然后復制參數用到 css 中。
多個屬性分別設置不同函數
有時候你希望不同的屬性有不同的過渡節奏。比如，寬度變化用 linear，而顏色變化用 ease-out，這時候可以分開寫：
transition-property: width, background-color; transition-duration: 0.5s, 0.3s; transition-timing-function: linear, ease-out;
注意順序要一一對應，不然可能會出錯。這種寫法雖然靈活，但容易寫亂，建議只在有明顯節奏差異需求時才用。
基本上就這些。掌握好 transition-timing-function 能讓你的動畫更有層次感，別小看這點細節，用戶體驗往往就藏在這種地方。
