三次贝塞尔缓动编辑器

通过可拖动编辑器和实时动画预览设计自定义 cubic-bezier 缓动曲线。

曲线编辑器

拖动两个控制点来塑造缓动曲线。

动画预览

缓动

线性

填充

时长 1.2s

与线性对比

控制点

控制点 1

控制点 2

预设

值

cubic-bezier(0, 0, 1, 1)

CSS 输出

transition-timing-function: —;
animation-timing-function: —;

所有处理都在你的浏览器中完成——不会上传任何内容。

关于三次贝塞尔缓动编辑器

三次贝塞尔缓动编辑器为 CSS 过渡和动画设计自定义的时间函数。拖动曲线画布上的两个控制手柄，cubic-bezier(x1, y1, x2, y2) 值会实时更新；动画预览会在缓动效果旁边播放一个线性参照，方便你感受两者的差异，时长可调，并支持即时重放。

十种预设涵盖了常见的缓动词汇——标准的 ease、ease-in、ease-out 和 ease-in-out，加上像 back 和 anticipate 这样会超出端点范围的表现力更强的曲线，以及材料设计风格的加速和减速渐变。可以直接使用它们，也可以以它们为起点拖动出属于你自己的效果。

你还可以直接输入精确的控制点坐标，点击随机生成获取灵感，并复制单纯的 cubic-bezier() 值或可直接粘贴使用的完整 CSS 规则。整个编辑器都在你的浏览器中运行。

它们是两个控制点的坐标：x1、y1、x2、y2。x 轴表示时间（0 到 1），y 轴表示动画进度。控制点在早期被拉高，动画开始得快；被拉低，则开始得慢。

y 值可以。y 值高于 1 会让动画越过目标后再回落——"back"和"anticipate"预设正是这样做的。x 值必须保持在 0 到 1 之间，因为时间不能倒流。

可以用在任何 CSS 的 transition-timing-function 或 animation-timing-function 中，也可以用在 Web Animations API 的 easing 选项中。它可以替代 ease-in-out 这类关键词，换成专门为你的界面调校的曲线。

对于进入屏幕或响应用户输入的元素，使用 ease-out（快速开始、缓慢停止）——它会让人感觉反应迅速。对于离开屏幕的元素使用 ease-in。Ease-in-out 适合两端都可见的动作。

是的，免费且无需账号，完全在你的浏览器中运行——你设计的任何内容都不会被上传。