CubicBezier

前端开发者、CSS动画设计师在调试缓动函数时，用它拖拽曲线端点即可实时生成cubic-bezier()参数，无需手动猜测数值。

核心功能：拖拽生成与实时对比

官网首页提供一块可交互的坐标系，默认曲线为cubic-bezier(0, 0, .25, 1)。用户直接拖拽两个控制点，曲线形状和下方代码参数同步更新。右侧面板内置多条预设曲线库，点击任意曲线即可与当前曲线叠加对比（红色虚线显示差异）。支持将常用曲线保存到Library，并通过Import/Export功能批量导入导出曲线代码。

• Duration滑块：设置动画时长（默认1秒），影响预览速度
• Preview按钮：播放当前曲线的动画效果，直观感受缓动节奏
• Compare模式：点击库中曲线，与当前曲线在同一动画中并排对比
• 右键菜单：在Library曲线项上右键可复制永久链接（Permalink），方便分享给协作者

macOS App：离线版与M1原生支持

由开发者田陈（isaced）发布的免费开源App，在Mac App Store上架，大小仅228.1 KB。App提供与官网一致的核心交互，但支持离线使用，并针对macOS 11.0+及Apple M1芯片做了原生适配。2022年6月发布的1.2版本修复了macOS Monterey的渲染Bug并优化了UI外观。

• 开源地址：https://github.com/isaced/CubicBezier，可提交Issue或PR
• 隐私：App不收集任何用户数据
• 年龄分级：4+，适合所有开发者使用

适用场景与人群

主要面向Web前端工程师和UI动效设计师，用于快速验证CSS transition或animation中的cubic-bezier()参数。官网由CSS专家Lea Verou制作并维护，页面底部设有Donate按钮支持持续开发。

• CSS动画调试：替代手动修改数值再刷新浏览器的低效流程
• 教学演示：可视化曲线与动画预览可帮助学生理解缓动函数原理
• 团队协作：通过Permalink分享曲线配置，无需截图或复制代码

常见问题

Q1：CubicBezier生成的曲线代码如何应用到实际CSS中？

A1：在官网拖拽曲线后，页面顶部会实时显示cubic-bezier(x1, y1, x2, y2)的完整代码，直接复制该字符串填入CSS的transition-timing-function或animation-timing-function属性即可。

Q2：macOS版CubicBezier与网页版功能有差异吗？

A2：核心交互一致，但macOS App支持离线使用，且针对Apple M1芯片和macOS Monterey做了兼容性修复。网页版由Lea Verou维护，App由田陈独立开发，两者代码库不同。

更多同类工具与网站,可在在线编程分类继续挑选。

信息核实于 2026年7月,具体以官网为准。