三次贝塞尔曲线生成器

cubic-bezier() 是由贝塞尔曲线定义的缓动（时间）函数。在 transition-timing-function 或 animation-timing-function 中写作 cubic-bezier(x1, y1, x2, y2)，两个控制点弯曲曲线，使动画加速和减速，而不是以恒定速度运动。例如，cubic-bezier(0.25, 0.1, 0.25, 1) 与 CSS 关键字 'ease' 完全相同。

cubic-bezier(x1, y1, x2, y2) 列出两个控制点：P1 = (x1, y1) 拉动曲线的起点，P2 = (x2, y2) 拉动终点。曲线本身始终从 (0,0) 开始，在 (1,1) 结束。x 值代表时间，必须保持在 0 到 1 之间；y 值代表进度，可以低于 0 或高于 1 以实现过冲效果。拖动图表上的两个手柄，四个数字会随着移动实时更新。

linear 以恒定速度移动，没有缓动——对大多数 UI 来说看起来不自然。ease——CSS 默认值——开始稍快然后缓出。ease-in 缓慢开始并在末尾加速，通常给人一种物体下落的感觉。ease-out 快速开始然后减速，这对出现在屏幕上的元素来说通常感觉最自然。ease-in-out 两端缓慢，中间最快，适合穿越屏幕并需要平滑停止的元素。

y 值可以，这就是获得过冲和预备动作效果的方式。x（时间）值始终限制在 0–1，但 y 高于 1 会使元素超过目标后弹回——像弹簧一样——而 y 低于 0 会使其先向后收缩。一个经典例子是 easeOutBack = cubic-bezier(0.34, 1.56, 0.64, 1)。这个编辑器允许你将手柄拖出 0–1 框来创建这些效果。

将其放入时间函数槽中。对于过渡：transition: transform 600ms cubic-bezier(0.33, 1, 0.68, 1);。对于关键帧动画：animation: slide 600ms cubic-bezier(0.33, 1, 0.68, 1) both;。此工具的 CSS 标签页使用你当前的曲线和持续时间自动生成两个代码片段，可以直接复制粘贴到样式表中。

从预设目录加载——Penner / easings.net 曲线都有标准的 cubic-bezier 近似值。例如 easeInOutQuad = cubic-bezier(0.45, 0, 0.55, 1)，easeOutCubic = cubic-bezier(0.33, 1, 0.68, 1)，easeInOutCubic = cubic-bezier(0.65, 0, 0.35, 1)。从画廊选择命名曲线，直接将值复制到 CSS 中。

完全免费，无需注册，没有任何内容被上传到任何地方。曲线编辑器、实时预览以及 CSS、GSAP 和 JavaScript 导出都在浏览器本地运行。你创建的内容不会发送到服务器，因此你的工作完全留在你的设备上。你还可以通过在 URL 中编码四个值的链接来分享曲线——无需账号。