隆重推出 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
- 17.2
在 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 提供