贝塞尔曲线生成器

什么是贝塞尔曲线生成器？

如何使用贝塞尔曲线生成器

1. 1

   选择预设曲线：点击左侧预设列表里你需要的缓动预设，就能直接加载对应参数，快速预览常用缓动，省去从头调整的步骤。

2. 2

   拖拽调整控制点：在演示坐标轴上，按住两个黑色实心控制点拖动，就能改变曲线的斜率走向，实时看到曲线形态的变化。

3. 3

   预览动画效果：观察坐标轴右侧的演示方块动画，感受当前曲线的缓动节奏，判断是否符合你对动画速率的需求。

4. 4

   复制输出代码：点击下方代码输出区右侧的『复制』按钮，将生成好的完整 cubic-bezier 代码复制，即可粘贴到你的项目中。

什么场景会用到？

计算示例

注意事项

• 本工具仅生成CSS动画需要的三次贝塞尔缓动函数，不支持任意路径绘图用贝塞尔曲线导出。
• 拖拽控制点时，x轴取值范围被限制在0到1之间，这是CSS缓动函数的规范要求。
• 生成的代码可直接放入CSS transition-timing-function或animation-timing-function属性使用。
• 不同浏览器对自定义贝塞尔缓动的渲染精度一致，不会出现明显的动画速度差异。

常见问题

参考资料

• W3C CSS Transitions 规范（三次贝塞尔缓动定义的官方标准）
• MDN Web Docs 的 cubic-bezier() 文档

本工具遵循W3C CSS规范对三次贝塞尔缓动函数的定义，坐标范围、输出格式均符合标准，所有示例输出均经过程序验证，由工具集编辑组维护。