轻工具

贝塞尔曲线生成器

拖动两个控制点调出想要的缓动曲线，实时生成 cubic-bezier 值与 CSS 代码。

曲线编辑区

横轴是时间，纵轴是进度。控制点拖出边框可以得到回弹效果，键盘方向键也能微调。

常用预设
效果预览

方块按当前曲线从左走到右，再按相反曲线返回。

cubic-bezierease
CSS 写法transition: all .3s ease;

使用说明

  1. 拖动曲线上的两个圆点，或者在下方直接输入四组数值，曲线与代码会即时更新。
  2. 横轴是时间，0 是开始、1 是结束；纵轴是进度，小于 0 表示先反向，大于 1 表示冲过头。
  3. 点预设按钮可以快速套用常见曲线，再在预设基础上微调。
  4. 点「复制曲线值」拿到 cubic-bezier 函数，点「复制 CSS」拿到一整行 transition 声明。
  5. 预览方块会按当前曲线往返一次，动画时长固定为 0.9 秒，方便对比手感。

常见问题

为什么 x 只能填 0 到 1？
cubic-bezier 的 x 表示时间进度，必须单调递增，所以两个控制点的 x 都要落在 0 到 1 之间。y 没有这个限制，可以小于 0 或大于 1，用来越界回弹。
回弹效果是怎么做出来的？
把 P1 或 P2 的 y 拖到 1 以上，曲线会先冲过终点再回来，视觉上就是回弹。y 小于 0 则先向反方向退一下再出发，适合做「蓄力」的感觉。
linear 和 ease 有什么区别？
linear 是匀速，进度与时间成正比，机械感强。ease 起步加速、结尾减速，接近真实物体的运动，也是浏览器默认值。界面动效通常用 ease 或 ease-out。
生成的曲线能用在哪些属性上？
所有接受 timing-function 的地方都可以，例如 transition、animation，以及 Web Animations API 的 easing 参数。transform、opacity 这类合成属性配合缓动，性能通常最好。

使用步骤

  1. 拖控制点

    在曲线编辑区拖动两个圆点，曲线、数值与预览会同步更新。拖到框外可以做出先回退或冲过头的效果。

  2. 直接输数值

    下方四个输入框对应 P1 与 P2 的坐标，x 限制在 0 到 1，y 可以到 -0.5 与 1.5，超出范围会提示。

  3. 套一个预设

    ease、ease-in、ease-out、ease-in-out、linear、回弹与急停七个预设覆盖大多数场景，套完还能继续微调。

  4. 看预览找手感

    方块按当前曲线从左走到右再返回，时长固定 0.9 秒。曲线越陡，方块在对应阶段走得越快。

  5. 复制代码

    「复制曲线值」得到 cubic-bezier 函数，「复制 CSS」得到一整行 transition，粘进样式表即可使用。

工具详细介绍

界面里的动画好不好看，很大程度取决于速度曲线，而不是时长。匀速运动在现实里几乎不存在，物体起步要加速、停下要减速，浏览器默认的 ease 就是在模拟这个过程。linear 看起来机械，ease-in 像被拖着走，ease-out 像松手之后自然停下。同一个元素，换一条曲线，观感能从生硬变得轻快。把曲线调对，比单纯拉长时长有效得多。先调曲线，再调时长，是最省时间的做法。

本页把 cubic-bezier 的四个参数做成可视化的两个控制点，横轴是时间、纵轴是进度。拖动时浏览器解出对应的贝塞尔曲线，方块立刻按这条曲线跑一遍。生成的代码可以直接用于 transition、animation 与 Web Animations API。七个预设覆盖常见场景，数值输入框方便精确复现设计稿，全部计算在本地完成，不上传任何数据。改完的曲线可以直接用于项目，不需要截图对比，也方便复用。

原理与背景

cubic-bezier 由四个点定义：起点 (0,0)、终点 (1,1) 与两个控制点。给定时间 t，x 与 y 分别由三次多项式算出。问题是动画需要「时间到进度」的映射，而公式给的是参数 t 到坐标，所以浏览器要先用牛顿迭代解出 x 对应的参数，再算 y。x 必须单调递增，迭代才收敛，这就是两个控制点的 x 被限制在 0 到 1 的原因。如果 x 不单调，同一个时间会对应多个进度，动画就无法确定该停在哪。

缓动函数只改变速度分布，不改变总时长。想让动画更快，应该缩短 duration，而不是把曲线拉得更陡。回弹曲线适合按钮、卡片这类小元素，用在整页转场或文字上会显得轻浮。系统开启「减少动态效果」时，应当把动画降级为淡入或直接切换，这一点比曲线本身更重要。时长与曲线分开调，先定节奏，再修手感。两步都做完，动画的最终观感才稳定。

典型使用场景

  1. 弹窗与抽屉

    移动端抽屉从底部滑出，用 ease-out 让它在最后一段减速，停得稳。关闭时换成 ease-in，先慢后快，用户不会觉得拖沓。时长控制在 250 到 350 毫秒之间，太慢会挡住操作，太快又看不清动效。

  2. 落地页主视觉

    首屏标题与按钮依次入场，用带一点回弹的曲线做出层次，但幅度控制在 1.1 以内。文字来回晃动会影响阅读，回弹只留给图标和容器，正文保持平滑，观感更稳。

  3. 游戏按钮反馈

    按下按钮时快速缩小再回弹，时长 120 毫秒左右，曲线陡一点，手感干脆。反馈越快，操作感越强，长按与连点也不会互相干扰。游戏按钮与工具栏图标都适合这种节奏。

使用技巧

  • 入场用 ease-out，元素快速出现再缓慢落位，观感比 ease-in 更利落。
  • 退场用 ease-in，先慢后快，元素离开时不会拖泥带水。
  • 大元素移动慢一点，小元素可以快一点，曲线相同时时长对体感的影响很大。

注意事项

  • 回弹用在文字上

    文字位置来回晃动会明显影响可读性，尤其是小字号。回弹只留给图标、按钮与卡片，正文区域用平滑曲线。动效再好看，也不能干扰阅读，这是界面动效的底线。

  • 靠曲线拖长动画

    把曲线调得很平不会让动画更优雅，只会显得迟钝。先定时长，再挑曲线，两者分开调。改完在真机上跑一遍再定稿，模拟器感受不到细节差异，真机才是标准。

  • 忽略减少动态效果

    有些用户会因为页面里的动画感到不适，甚至头晕。用 prefers-reduced-motion 查询做降级，保留状态变化，去掉位移与缩放。这比选哪条曲线更重要，系统设置变了自己的页面也能跟着跟上。

相关工具