# 使用 Linear() 加/減速函式在 CSS 中建立複雜的動畫曲線

Bramus

## CSS 中的加/減速設定

CSS 中有幾個預設關鍵字，包括 `linear``ease``ease-in``ease-out``ease-in-out`。如要自行建立加/減速曲線，請使用 `cubic-bezier()` 函式，或使用 `steps()` 加/減速函式採取步驟式方法。

## `linear()` 簡介

``````animation-timing-function: linear(0, 0.25, 1);
``````

``````animation-timing-function: linear(0, 0.25 75%, 1);
``````

``````animation-timing-function: linear(0, 0.25 25% 75%, 1);
``````

## 使用 Linear() 建立複雜曲線

``````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;
}
``````

``````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
);
``````

## 開發人員工具支援

[{ "type": "thumb-down", "id": "missingTheInformationINeed", "label":"缺少我需要的資訊" },{ "type": "thumb-down", "id": "tooComplicatedTooManySteps", "label":"過於複雜/步驟過多" },{ "type": "thumb-down", "id": "outOfDate", "label":"過時" },{ "type": "thumb-down", "id": "translationIssue", "label":"翻譯問題" },{ "type": "thumb-down", "id": "samplesCodeIssue", "label":"示例/程式碼問題" },{ "type": "thumb-down", "id": "otherDown", "label":"其他" }]
[{ "type": "thumb-up", "id": "easyToUnderstand", "label":"容易理解" },{ "type": "thumb-up", "id": "solvedMyProblem", "label":"確實解決了我的問題" },{ "type": "thumb-up", "id": "otherUp", "label":"其他" }]
{"lastModified": "\u4e0a\u6b21\u66f4\u65b0\u6642\u9593\uff1a2023-05-25 (\u4e16\u754c\u6a19\u6e96\u6642\u9593)\u3002"}