CSS 贝塞尔曲线生成器

工具介绍

cubic-bezier() 是一种 CSS 时间函数，控制过渡或动画在时间轴上的加速和减速方式，而不是匀速运动。它由两个控制点 (x1, y1) 和 (x2, y2) 定义，在固定的起点 (0,0) 和终点 (1,1) 之间弯出一条曲线。x 值必须在 0 到 1 之间，但 y 值可以超出这个范围，做出「过冲」或弹性效果。

手写调整四个小数来找到不生硬也不拖沓的手感，通常要反复试错。这个工具把猜数字变成了直接拖动：拖滑块，曲线弯曲和预览小球的运动同步实时变化，效果满意后直接复制 CSS。

来源：CSS Easing Functions Level 1, W3C — 定义 cubic-bezier() 以及本工具预设所依据的五个命名关键字的规范文档。

为什么使用它？

• 实时 SVG 曲线图清楚展示曲线在固定起点和终点之间的弯曲形态，两个控制点及其连线也一并画出。
• 「播放」按钮用你设计的曲线驱动一个预览元素移动，让你直接感受运动节奏，而不只是看静态曲线。
• 内置 CSS Easing 规范定义的五种标准命名缓动函数预设——ease、ease-in、ease-out、ease-in-out、linear，一键套用。
• y 值可以设为负数或大于 1，做出命名关键字做不到的过冲/弹性缓动效果。
• 生成即可直接粘贴使用的 transition-timing-function CSS——同一个值也能用在 animation-timing-function 上。
• 全部在浏览器本地计算，不上传任何配置。免费、不用注册。

使用方法

1. 拖动 x1/y1 滑块设置第一个控制点，决定动画的起始形态。
2. 拖动 x2/y2 滑块设置第二个控制点，决定动画的结束形态。
3. 观察图中的黑色曲线——曲线早期高于对角线代表动画一开始就很快，低于对角线则代表一开始较慢。
4. 点击「播放」，看预览元素用你设计的曲线作为 transition-timing-function 移动。
5. 可以先套用一个预设（ease、ease-in、ease-out、ease-in-out、linear）作为起点，再微调滑块。
6. 复制生成的 CSS，粘贴到 transition 或 animation 规则里。

示例

输入

x1: 0.25, y1: 0.1, x2: 0.25, y2: 1

输出

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

这正是标准 CSS ease 关键字对应的控制点数值——快速起步，然后逐渐减速直到结束。

为什么 y 值可以超出 0–1

x 轴代表时间，必须从 0 走到 1；但 y 轴代表动画属性的进度，没有这个限制。把 y1 设为负数或 y2 设为大于 1，曲线就会在起点之前先往回甩一下，或者在终点之后先冲过头再回落——这正是按钮按下反馈、弹窗弹出、俏皮微交互中常见的「过冲」和「预备动作」效果的原理。ease、ease-in、ease-out、ease-in-out、linear 这五个命名关键字都做不到这一点，只能靠自定义 cubic-bezier() 实现。

transition-timing-function 和 animation-timing-function 的区别

这个工具生成的 cubic-bezier() 值在两个属性里效果完全一样。状态变化触发的动效（比如 hover 或切换类名）用 transition-timing-function；写在 @keyframes 驱动的动画规则里、需要自动播放或循环的效果用 animation-timing-function。

常见缓动模式

• 干脆利落的界面反馈（按钮、开关）：控制点贴近对角线并略带 ease-out 倾向，比如 cubic-bezier(0.4, 0, 0.2, 1)。
• Material Design 标准曲线：cubic-bezier(0.4, 0, 0.2, 1)——起步快、收尾柔和，常用于面板和卡片过渡。
• 弹性过冲：把 y2 设到大于 1，比如 cubic-bezier(0.34, 1.56, 0.64, 1)，做出俏皮的弹出效果。
• 运动前的预备动作：把 y1 设为负数，元素在正式移动前先轻轻往回缩一下。
• 循环动画适合平滑对称的 ease-in-out：让曲线大致关于中心对称。

配合其他 CSS 工具一起用

缓动曲线很少单独使用——通常要配合有阴影、圆角或渐变的元素一起用。先用下面的 CSS 工具生成视觉样式，再把这个工具生成的时间函数加到同一条规则或 transition/animation 声明里。

→ 盒阴影生成器 · 圆角生成器

常见问题