缓动函数：ease、linear、cubic-bezier
使用内置关键字和 cubic-bezier() 函数控制过渡的速度曲线。
缓动函数：ease、linear、cubic-bezier 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
什么是缓动函数
缓动函数控制过渡或动画的速度曲线，即控制其在持续时间内加速或减速的方式。
linear
linear 会让过渡始终保持恒定速度。它适合加载条和进度指示器，因为这些元素通常需要匀速运动。
<div class="progress-track"><div class="progress"></div></div>ease（默认值）
ease 开始时速度较快，然后在结束前减速。这是默认值，对大多数用户界面过渡来说感觉很自然。
ease-in
ease-in 开始缓慢，然后逐渐加速。它适合离开屏幕的元素（退出动画）。
<div class="modal">Open</div>
<div class="modal closing">Closing (faded to invisible)</div>ease-out
ease-out 开始时速度较快，然后减速。它非常适合进入屏幕的元素——元素会有力地进入，然后平滑地停下。
<div class="modal opening">Modal content</div>ease-in-out
ease-in-out 开始和结束时较慢，中间运动较快。它最适合循环动画或往返动画。
cubic-bezier()
使用四个控制点定义自定义三次贝塞尔曲线。它可以实现类似弹簧的自定义缓动曲线。
<div class="card">Card</div>读取 cubic-bezier 值
四个值定义两个控制点：cubic-bezier(x1, y1, x2, y2)。y 轴上的值大于 1 会产生过冲（弹簧）效果。可以使用 easings.net 等工具将曲线可视化。
steps() 函数
steps(n, direction) 会将动画分成 n 个离散且相等的步骤。它非常适合精灵动画和打字机效果。
<div class="sprite"></div>steps() 方向关键字
第二个参数控制步骤发生的位置：
jump-start：在时间 0 处执行第一步jump-end：在结束时间执行最后一步（默认值）jump-both：在开始和结束时都执行步骤jump-none：开始和结束时都不执行步骤
现代方式：使用 linear() 创建复杂曲线
新的 linear() 函数允许通过多个点定义任意缓动曲线，从而无需受到 cubic-bezier 的限制，就能仅使用 CSS 实现弹簧和弹跳效果。
<div class="spring">Spring easing</div>快速检查
哪个缓动函数会在整个过渡过程中保持恒定速度？
回顾
缓动函数控制动画的速度曲线。内置选项包括：linear、ease、ease-in、ease-out 和 ease-in-out。自定义曲线使用 cubic-bezier()。离散步骤使用 steps()。新的 linear() 函数可以实现复杂的弹簧式曲线。
常见问题解答
「缓动函数：ease、linear、cubic-bezier」课时是免费的吗？
是的 — 「缓动函数：ease、linear、cubic-bezier」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「缓动函数：ease、linear、cubic-bezier」这节课中我会学到什么？
使用内置关键字和 cubic-bezier() 函数控制过渡的速度曲线。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「缓动函数：ease、linear、cubic-bezier」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 过渡属性、持续时间与时序
- 缓动函数：ease、linear、cubic-bezier
- 过渡多个属性
- 性能：可变换属性与触发重绘的属性