cubic-bezier 生成器 — CSS 缓动编辑器
用可拖动的控制点设计 CSS 缓动曲线,预览动画并复制 cubic-bezier() 值。内置预设——在浏览器中完成。
🔒 全部在你的浏览器中运行。输入和输出都不会发送到服务器或被保存,十分安全。
拖动两个控制点来调整曲线。
关于此工具
这款 cubic-bezier 编辑器让你通过在网格上拖动两个控制点来打造自定义的 CSS 缓动曲线。当你塑造曲线时,动画预览会实时播放这段运动,让你确切感受到过渡将如何加速和减速。觉得满意后,复制 cubic-bezier() 的值,放进 CSS 的 transition 或 animation 中。它比内置的 ease、linear 等关键字更具表现力,而且整个编辑器都在你的浏览器中本地运行。
常见问题
cubic-bezier 曲线实际控制的是什么?
它控制的是动画的节奏——进度如何在其持续时间内分配,而不是动画的长度或距离。曲线把横轴上流逝的时间,映射到纵轴上动画推进的程度,因此陡峭的区段代表快速运动,平缓的区段代表缓慢运动。两个可拖动的控制点会弯曲这条曲线,让你设计出起步柔和、骤然加速,或介于两者之间的各种缓动。
控制点的数值可以超出 0 到 1 的范围吗?
两个时间值(每个控制点的 X 坐标)必须保持在 0 到 1 之间,但进度值(Y 坐标)可以高于 1 或低于 0。把 Y 推到这些界限之外,会让动画越过目标再弹回,或在向前出发之前先后退——这正是弹跳、弹性和预备动作效果的基础。预览会清晰地展示这种运动,让你恰到好处地加入弹跳而不会过头。
生成的值用在哪里?编辑器是在我的设备上运行吗?
把 cubic-bezier() 的值粘贴到 CSS 的 transition-timing-function 或 animation-timing-function 中,用来替代 ease-in-out 之类的关键字。它适用于所有现代浏览器。编辑器本身完全使用本地 JavaScript 在你的浏览器中运行——曲线、实时预览和生成的值都在你的设备上计算,因此你创建的任何内容都不会上传或存储到服务器。