隆重推出 linear()。這項 CSS 的加/減速功能會在點之間線性插入，以便您重新建立彈跳和彈簧效果。
CSS 中的加/減速設定
在 CSS 中為元素建立動畫或轉換時，您可以使用 animation-timing-function 和 transition-timing-function 屬性控制加/減速函式，控制值的速率。
CSS 中有多種做為預設關鍵字，包括 linear、ease、ease-in、ease-out 和 ease-in-out。如要建立自己的加/減速曲線，請使用 cubic-bezier() 函式，或採用 steps() 加/減速功能，按照步驟進行。
只要正確使用，加/減速功能就能讓動畫元素產生權重，以提升動畫效果。
CSS 無法建立複雜的曲線 (例如彈跳或彈簧效果)，但有了 linear()，您現在可以更自然地模擬這些曲線。
linear() 簡介
瀏覽器支援
- 113
- 113
- 112
- x
在 CSS 中定義加/減速的新方法是使用 linear()。這個函式接受多個停靠站，請以半形逗號分隔。每個停靠站都是從 0 到 1 之間的一個數字。在每個停靠站之間，內插都是以線性方式完成，藉此說明函式的名稱。
animation-timing-function: linear(0, 0.25, 1);
這些停靠站預設為平均分配。在上述程式碼片段中，表示 50% 的輸出值會使用 0.25 的輸出值。
linear(0, 0.25, 1) 的圖表顯示如下：
如果您不希望停靠站繼續分散，可以選擇傳入停靠站長度。傳入一個值做為停靠站長度時，您可以定義其起點：
animation-timing-function: linear(0, 0.25 75%, 1);
在這裡，0.25 的輸出值不會用於 50% 標記，而是在 75% 處。
將兩個值指定為停靠站長度時，需定義其起點和終點：
animation-timing-function: linear(0, 0.25 25% 75%, 1);
輸出值 0.25 會在 25% 到 75% 的時間內使用。
使用 Linear() 建立複雜曲線
雖然上述範例的加/減速非常簡單，但您可以使用 linear() 以非常簡單的方式重新建立複雜的加/減速函式，同時保有部分精確度。
這個跳出曲線是無法直接在 CSS 中表達的加/減速類型，使用 JavaScript 定義：
function easing(pos) {
const t = 7.5625;
const e = 2.75;
return pos < 1 / e
? t * pos * pos
: pos < 2 / e
? t * (pos -= 1.5 / e) * pos + 0.75
: pos < 2.5 / e
? t * (pos -= 2.25 / e) * pos + 0.9375
: t * (pos -= 2.625 / e) * pos + 0.984375;
}
雖然程式碼可能無法是什麼意思，但視覺呈現也許會更好。以下是以藍色曲線視覺化呈現的輸出內容：
只要在其中加入幾個停靠站，即可簡化曲線。這裡的每個綠點都代表一個停靠站：
傳遞至 linear() 時，結果是有點看起來像原始曲線，但邊緣的粗細。
只要比較綠色的動畫方塊和藍色的方塊，就能判斷它不是那麼平滑。
不過，如果您新增的停靠站數量夠多，就能妥善估算原始曲線。以下是更新版本：
只要把轉機次數增加一倍，就能得到平滑的結果。
用於建立動畫的程式碼如下所示：
animation-timing-function: linear(
/* Start to 1st bounce */
0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141, 0.25, 0.391, 0.563, 0.765, 1,
/* 1st to 2nd bounce */
0.891, 0.813 45.5%, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813 63.6%, 0.891, 1 72.7%,
/* 2nd to 3rd bounce */
0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1,
/* 3rd bounce to end */
0.988, 0.984, 0.988, 1
);
輔助工具
手動建立停靠站清單非常麻煩。幸好，Jake 和 Adam 建立了工具，協助您將加/減速曲線轉換為 linear() 對應項目。
這項工具會將 JavaScript 加/減速函式或 SVG 曲線做為輸入內容，並使用 linear() 輸出簡化的曲線。使用滑桿控制所需的停靠站數量和精確度。
你也可以在右上方選擇任一預設選項：彈簧、彈跳、簡易彈性尺寸或 Material Design 強調的加/減速設定。
開發人員工具支援
開發人員工具支援以視覺化方式呈現並編輯 linear() 的結果。按一下圖示，即可在停靠站周圍拖曳，展開互動式工具提示。
這項開發人員工具功能適用於 Chrome 114 的開發人員工具。
相片來源：Howie Mapson 在 Unsplash 網站上