Cubic Bezier 编辑器
可视化绘制三次贝塞尔时间函数曲线，帮助前端开发者精确调校过渡与动画的节奏感
永久免费本地计算 · 零上传
🔒 全程在浏览器内计算，输入内容不会离开您的设备。
怎么用
- 拖动 P1、P2 两个控制点调整曲线形状
- 观察下方动画预览的实时运动节奏
- 微调数值输入框达到精确时间比
- 复制 cubic-bezier(x1,y1,x2,y2) 到代码中
典型场景
设计按钮悬停过渡动画的加速曲线
调整页面滚动进入视口时的弹性效果
复现 Material Design 标准缓动函数
常见问题
控制点能超出 0-1 范围吗？
x 轴限定在 0~1，y 轴可超出此范围产生回弹效果。
是否提供预设曲线？
内置 ease、ease-in-out、Material、iOS 等常用曲线一键加载。
导出的格式有哪些？
同时输出 CSS transition-timing-function 和 JS 数组两种写法。