新!我的 44 頁電子書「44 分鐘學會 CSS」出爐囉!😃

立即取得 →

#transition-timing-function

定義如何計算轉場開始結束之間的值。

預設 transition-timing-function: ease;

轉場一開始很慢,中間加速,最後變慢。

transition-timing-function: ease-in;

過渡緩慢開始,並逐漸加速至結束。

transition-timing-function: ease-out;

過渡快速開始,並逐漸減速至結束。

transition-timing-function: ease-in-out;

ease 類似,但更明顯。

過渡快速開始,並逐漸減速至結束。

transition-timing-function: linear;

過渡具有*恆定速度*

transition-timing-function: step-start;

過渡立即跳轉至最終狀態

transition-timing-function: step-end;

過渡維持在初始狀態,直到結束時才立即跳轉至最終狀態

transition-timing-function: steps(4, end);

透過使用帶有整數steps(),您可以在到達結束前定義特定數目的步驟。元素的狀態不會逐漸變化,而是在不同的時間點從一個狀態跳轉到另一個狀態。