# 使用 linear() 加/减速函数在 CSS 中制作复杂的动画曲线

Bramus

## CSS 中的加/减速选项

CSS 中有多个作为预设的关键字，分别为 `linear``ease``ease-in``ease-out``ease-in-out`。如需创建自己的加/减速曲线，请使用 `cubic-bezier()` 函数，或使用 `steps()` 加/减速函数采用基于步骤的方法。

## `linear()`简介

• <ph type="x-smartling-placeholder">
• <ph type="x-smartling-placeholder">
• <ph type="x-smartling-placeholder">
• <ph type="x-smartling-placeholder">

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

## 一款实用的工具

<ph type="x-smartling-placeholder">

## 开发者工具支持

<ph type="x-smartling-placeholder">

[{ "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": "\u6700\u540e\u66f4\u65b0\u65f6\u95f4 (UTC)\uff1a2023-05-25\u3002"}