CSS 贝塞尔曲线在线编辑器 - 可视化缓动曲线

可视化 cubic-bezier 生成器，专为 CSS 缓动而生

这款 cubic-bezier 生成器让你靠眼睛而不是靠猜来打造自定义 CSS 缓动曲线。拖动两个控制点，实时看着曲线变化，再把精确的 cubic-bezier() 值复制到你的过渡和动画里。

它是为前端开发者、UI 设计师，以及所有厌倦了盲填四个数字、还在反复调试动效的人准备的。先从 29 个预设中挑一个起步，再微调控制点，直到你的 ease-in、ease-out 或回弹手感恰到好处。

隐私优先：每一次绘制曲线、预览和复制都完全在你的浏览器中进行。你编辑的内容绝不会上传到任何服务器。

如何使用编辑器

塑造你的曲线

拖动画布上的两个控制点手柄来弯折缓动曲线。手柄 P1 决定动作的起始段，手柄 P2 决定结束段。拖动时它们的坐标会实时显示。

输入精确数值

想要更精准？在画布下方的输入框里直接填入四个数字。X 值会被限制在 0 到 1 之间，而 Y 值可以取 -0.5 到 1.5，用来制作回弹效果。

从预设起步

点击 29 个预设中的任意一个即可立即套用，然后继续微调。5 个 CSS 标准缓动（linear、ease、ease-in、ease-out、ease-in-out）和八大 Penner 系列都只需一键。

预览动效

看着小球按照你的曲线运动。开启对比，让它与 linear 匀速运动赛跑；拖动时长滑块，测试从 200ms 到 3 秒的各种速度。

复制 CSS

点击复制，同时获取 transition-timing-function 和 animation-timing-function。你也可以直接点击 cubic-bezier 值本身来快速复制。

功能特性

可交互贝塞尔画布

带坐标网格、坐标轴标签和一条对角 linear 参考线的 SVG 画布。拖动 P1、P2 控制点来塑造曲线，移动时坐标会实时显示。

29 个缓动预设

5 个 CSS 标准缓动，外加横跨 8 大系列（Sine、Quad、Cubic、Quart、Quint、Expo、Circ、Back）的 24 个 Penner 函数，每个都配有迷你曲线缩略图。

赛跑对比

让你的自定义曲线与 linear 缓动并排进行小球赛跑，立刻就能看出你的动效在哪里偏快、偏慢或停顿。

多属性预览

看同一条缓动曲线同时驱动四种 CSS 属性：位移、缩放、旋转和透明度，帮你为不同场景挑出最合适的手感。

支持回弹

Y 值可以延伸到 -0.5 至 1.5，让你做出会冲过头再弹回来的曲线，打造像 Back 系列那样灵动的弹簧式动效。

数值输入

四个输入框与画布始终保持完美同步，你既可以输入精确数值，也能反向读出任何拖动曲线背后的数字。

时长可调

用时长滑块以任意速度测试你的缓动：从 200ms 的利落微交互，到 3 秒的舒缓、富有戏剧性的过渡。

即复制即用的 CSS

同时获得干净的 transition-timing-function 和 animation-timing-function 输出，支持一键复制，点击数值文本也能快速复制。

常见问题

CSS 中的 cubic-bezier 是什么？

cubic-bezier(x1, y1, x2, y2) 是一个 CSS 函数，用来为过渡和动画定义自定义的时间曲线。这四个数字控制两个手柄点，决定动画在整个时长里如何加速和减速。

cubic-bezier 的四个值分别是什么意思？

它们是两个控制点：P1 (x1, y1) 和 P2 (x2, y2)。X 值代表时间，0 是起点、1 是终点，必须保持在 0 到 1 之间。Y 值代表进度，可以超出 0 到 1 的范围以实现回弹。

如何做出弹跳或回弹的缓动曲线？

把某个 Y 值设为小于 0 或大于 1。小于 0 会让动作短暂往回走，大于 1 会让它冲过目标再回落，从而产生弹跳或弹簧的感觉。Back 系列预设正是基于这个技巧。在本编辑器中，Y 值的取值范围是 -0.5 到 1.5。

Penner 缓动函数是什么？

Robert Penner 的缓动方程是一套在动画中广泛使用的标准动效曲线。每个系列（Sine、Quad、Cubic、Quart、Quint、Expo、Circ、Back）都有三种变体：In 表示缓慢起步，Out 表示缓慢收尾，InOut 则两者兼有。本编辑器以预设形式提供了这些曲线的 cubic-bezier 近似版本。

cubic-bezier 和 ease-in-out 有什么区别？

ease-in-out 只是某一条特定 cubic-bezier 曲线 (0.42, 0, 0.58, 1) 的命名关键字，它的起步和收尾都很慢。而 cubic-bezier() 是一个通用函数，让你能定义任意想要的曲线，既包括 ease-in-out，也包括无数关键字无法表达的曲线。用对比功能就能看出自定义曲线与 linear 的差别。

如何使用生成的代码？

复制输出结果，把该值应用到你的过渡或动画上，例如 transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); 或 animation: slide-in 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);。编辑器会同时输出 transition 和 animation 的 timing-function 属性，任选其一直接用即可。