设计

三次贝塞尔曲线生成器

拖动曲线上的两个控制点，看真实元素随之运动，从而塑造一段动画的手感。三次贝塞尔函数能把生硬、机械的过渡变成会加速、会停稳、会回弹的自然动效，而把曲线和动作并排放在一起，这层关系就一目了然。可以从 CSS 关键字或某个命名缓动出发，再拖动手柄，直到时间感符合心里的预期。位移、缩放和透明度三个示例会循环播放，方便你比较同一条曲线作用在不同属性上的观感。输出是一份可直接粘贴的过渡或动画缓动函数，全部在浏览器里计算。

  • 拖动两个控制点，缓动曲线随实时动效预览一起更新
  • 从 CSS 关键字或 easeOutBack 等命名缓动出发，再手动微调
  • 位移、缩放和透明度示例并列，让同一条曲线在多种属性上接受检验
  • 控制点可超出 0 到 1 区间，做出带回弹的 back 缓动而不只是平滑过渡
  • 复制可直接用于过渡或动画的缓动函数，全部在浏览器里计算
工具/三次贝塞尔曲线生成器
ease
位移
缩放
透明度
600ms
transition
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

/* shorthand */
transition: all 600ms cubic-bezier(0.25, 0.1, 0.25, 1);
快捷操作

功能简介

把缓动曲线和它产生的动作并排呈现，让时间感成为一种能感受、能调整的东西，而不是在样式表里盲调的四个数字。

  1. 01

    直接编辑曲线

    拖动两个控制点来调整加速和减速，需要还原设计稿里的曲线时，也可以直接输入精确数值。

  2. 02

    多属性实时动效

    位移、缩放和透明度示例循环播放，呈现同一条曲线在驱动移动、尺寸和淡入淡出时的不同观感。

  3. 03

    关键字与命名缓动

    从 linear、ease、ease-in-out 或 easeOutCubic、easeInOutBack 等命名缓动起步，在此基础上微调，而不是从零开始。

  4. 04

    回弹与弹簧手感

    控制点可以移到 0 到 1 区间之外，因此做出会越过终点再回稳的 back 缓动，和平滑过渡一样简单。

  5. 05

    线性参照基准

    一条淡淡的直线和预览里的线性残影，让你清楚看出自己的曲线相比匀速、没有生气的运动偏离了多少。

  6. 06

    输出干净、可直接复制

    结果是标准的 cubic-bezier 缓动函数，外加过渡或动画的简写示例，可直接粘进任何样式表。

如何使用

把对动作手感的模糊感觉变成精确的缓动函数，无论你是在还原设计稿还是凭直觉调。

  1. 01

    从 CSS 关键字或某个接近目标手感的命名缓动里挑一个起点。

  2. 02

    拖动起点和终点控制点，调整动作的加速和减速方式。

  3. 03

    想要弹簧效果时，把某个控制点拉到方框上方或下方，让曲线越过终点回弹。

  4. 04

    设定时长，看位移、缩放和透明度示例，直到时间感合适。

  5. 05

    选择过渡或动画，再把缓动函数复制进样式表。

功能说明

动效是界面的一部分，而不是叠在上面的装饰，所以缓动编辑器要干净地对应真实的 cubic-bezier 语法，并如实展示结果。

  • 两个可拖动的控制点直接对应 cubic-bezier 函数的四个数字
  • 数值输入框接受精确值，便于还原设计工具或规范里的曲线
  • 控制点可越过 0 到 1 区间，做出 back 和弹簧类缓动
  • 预设分组涵盖 CSS 关键字，以及从 sine 到 back 的整套命名缓动
  • 每个预设都带一个小曲线缩略图，套用前就能认出它的形状
  • 位移、缩放和透明度示例一起循环，便于跨属性比较曲线
  • 线性残影和对角参照线显示曲线相比匀速偏离了多少
  • 可调的时长揭示同一条曲线在快慢不同时长下的手感
  • 输出同时包含 timing-function 声明和过渡或动画的简写
  • 一切都在浏览器本地运行，未发布工作的动效设计始终保持私密

适合哪些场景

缓动是让动作看起来经过设计、而非默认值的关键。合适的曲线取决于动的是什么、为什么动，而对着真实元素试，是最快的判断方式。

  1. 按钮与悬停过渡

    一段短促的 ease-out 让按钮和链接在悬停、按下时显得灵敏利落，不会拖沓或机械。

  2. 弹窗与浮层

    进入时带一点回弹往往更好看，退出则保持快速、线性，于是面板进来时有生气、离开时干脆。

  3. 菜单与折叠面板

    展开和收起用 ease-in-out 曲线更合适，让高度变化柔和地起步和收尾，而不是突然弹跳。

  4. 轻提示与通知

    稍微越过终点的 back 缓动能把目光引向进入的提示，再让它稳稳落位，不显得突兀。

  5. 页面与路由切换

    较大位移上用平滑的 ease-in-out 曲线，让视图之间的导航显得连贯而非生硬。

  6. 加载与进度

    循环指示器和进度条需要精心挑选缓动，让重复的动作显得平稳而非机械。

  7. 还原设计规范

    把设计工具里的精确控制点数值粘进来，就能在 CSS 里准确复现一条动效曲线，便于交付。

  8. 搭建动效体系

    定下一小组可复用的缓动曲线，让整个产品的动画共享同一种一致的时间感。

延伸阅读

动效叠在布局之上，所以先用 Flexbox 与 Grid 布局生成器 把结构定下来；当一段过渡同时改变层次时，再把缓动和来自 阴影生成器 的深度配在一起，让运动和阴影一起变化，而不是互相打架。

使用建议

缓动很容易用过头，养成几个习惯能让动效显得有意为之、前后一致，而不是杂乱或扰人。

  • 进入或响应输入的元素用 ease-out，先快后慢显得灵敏自然。
  • 离开屏幕的元素用 ease-in，先慢后快读起来像是在加速远离。
  • 回弹和弹簧曲线留给值得被注意的时刻，而不是页面上每一次过渡。
  • 小的界面变化保持短时长，大致 150 到 300 毫秒，让界面用起来依然轻快。
  • 让曲线匹配移动的距离，因为同一条缓动在小位移和大位移上手感不同。
  • 统一到少数几条命名曲线，而不是给每个组件都写一条独特的 cubic-bezier。
  • 尊重减少动态的偏好设置，为有此需求的用户减弱或移除较大的位移。
  • 在真实时长和尺寸下测试曲线，因为示例里合适的时间感放进实际场景可能偏慢。

边界与注意事项

这个工具聚焦于 CSS 的 cubic-bezier 时间函数，因此有几个相关的动效领域刻意不在范围内。

  • 它产出的是 cubic-bezier 曲线，用 steps() 的分段时间语法不同，这里不生成。
  • CSS 的 cubic-bezier 要求两个 x 值都落在 0 到 1 之间，所以水平方向的手柄被限制在该区间。
  • 它输出的是缓动函数，而非完整关键帧，被动画的属性和取值由你自己的 CSS 定义。
  • 预览使用固定的示例元素，请在真实组件的实际尺寸和位移下确认手感。
  • 动画库的弹簧物理可以用回弹近似，但和一条 cubic-bezier 曲线并不完全相同。
  • 观感上的流畅还取决于帧率和当时还有什么在重绘，这一点本编辑器不做测量。

常见问题

在塑造缓动曲线、把动效想法转成可上线的 CSS 时，最常出现的一些问题。

什么是三次贝塞尔缓动曲线？

它是一个用两个控制点把时间映射到进度的函数。弯折这条曲线，就能控制动画如何加速、减速或越过终点，而不是匀速移动。

生成的 CSS 能直接用于生产吗？

可以。输出是标准的 cubic-bezier 缓动函数，能直接粘进任何样式表的过渡或动画声明，无需改动。

什么时候用 ease-in，什么时候用 ease-out？

进入或响应输入的元素用 ease-out，它们减速落位；离开的元素用 ease-in，它们加速离开；既在屏幕上开始又在屏幕上结束的移动适合 ease-in-out。

怎样做出弹跳或弹簧效果？

把某个控制点拖到编辑框上方或下方，让曲线越过终点值，就能得到弹簧类缓动里那种越过再回稳的动作，比如 easeOutBack。

为什么 X 值受限而 Y 值不受限？

CSS 只允许代表时间的 cubic-bezier X 值落在 0 到 1 之间；代表进度的 Y 值可以超出该范围，以制造回弹。

它也会生成关键帧吗？

不会。它生成的是缓动函数。被动画的内容，比如 transform 或 opacity，由你在自己的过渡或关键帧规则里定义，再把曲线应用上去。

能还原我设计工具里的精确曲线吗？

可以。把四个控制点数值直接输入数值框，就能复现设计文件或规范里某一条特定的 cubic-bezier 曲线。

编辑时会上传任何内容吗？

不会。曲线编辑、预览和 CSS 生成都在浏览器本地完成，因此用于未发布的产品界面和保密的动效设计都很安全。

更多相关工具

时间感是精致界面的一层。缓动定下来之后，再回到布局和深度，让结构、层次和动效都成为同一套用心设计的一部分。