新!我的 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()
,您可以在到達結束前定義特定數目的步驟。元素的狀態不會逐漸變化,而是在不同的時間點從一個狀態跳轉到另一個狀態。