免费动画时间函数工具
面向产品级动效的 Cubic Bezier 生成器
用可视化方式编辑缓动曲线,实时预览动画,并复制 CSS、JavaScript、Tailwind、Framer Motion 代码。
曲线编辑器
cubic-bezier(.25, .1, .25, 1)
用可视化缓动编辑器做出更顺滑的 CSS 动画
Motion Curve Studio 帮助产品和前端团队不用猜参数就能调出可靠的动画时间函数。每条曲线都可以分享、保存、对比,并复制到现代前端项目。
Cubic Bezier 常见问题
什么是 cubic-bezier 缓动曲线?
它是由两个控制点定义的 CSS 时间函数,用来控制动画加速和减速的节奏。
可以用于 Tailwind CSS 吗?
可以。复制 Tailwind 输出,把它加入 theme easing 配置即可。
为什么要用可视化编辑器?
可视化编辑能更快判断速度感、回弹和精致度,避免上线后才发现动效生硬。