M Motion Curve Studio
免费动画时间函数工具

面向产品级动效的 Cubic Bezier 生成器

用可视化方式编辑缓动曲线,实时预览动画,并复制 CSS、JavaScript、Tailwind、Framer Motion 代码。

曲线编辑器

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

用可视化缓动编辑器做出更顺滑的 CSS 动画

Motion Curve Studio 帮助产品和前端团队不用猜参数就能调出可靠的动画时间函数。每条曲线都可以分享、保存、对比,并复制到现代前端项目。

Cubic Bezier 常见问题

什么是 cubic-bezier 缓动曲线?

它是由两个控制点定义的 CSS 时间函数,用来控制动画加速和减速的节奏。

可以用于 Tailwind CSS 吗?

可以。复制 Tailwind 输出,把它加入 theme easing 配置即可。

为什么要用可视化编辑器?

可视化编辑能更快判断速度感、回弹和精致度,避免上线后才发现动效生硬。