Cubic Bezier 生成器
预览
cubic-bezier(0.25, 0.1, 0.25, 1)transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);相关外部工具
部分链接为联盟营销链接。
相关工具
通过拖动两个控制点设计自定义 CSS 缓动曲线，在实时预览中观察动画效果，并复制可直接使用的 cubic-bezier() 值和 transition 代码。非常适合精细调整动画的运动感。所有操作均在浏览器中完成。
使用方法
- 拖动两个彩色控制点，或直接输入 x1、y1、x2、y2 的精确值。
- 点击重播按钮预览曲线产生的动画效果。
- 将 cubic-bezier() 值或完整的 transition 语句复制到 CSS 中。
工作原理
CSS 缓动曲线是一条三次贝塞尔曲线，固定端点为 (0,0) 和 (1,1)。两个控制点决定曲线的形状，其坐标即为 cubic-bezier(x1, y1, x2, y2) 中的四个数值。x 值必须在 0 到 1 之间（时间只能向前），而 y 值可以超出 0–1 范围，从而创造出预期或超越效果。
功能特点
拖动塑形
直接在曲线上拖动控制点，直观感受缓动效果。
精确数值输入
需要匹配设计规范或设计系统时，可直接输入精确坐标。
实时预览
重播动画效果，在使用前判断缓动是否符合预期。
标准预设
从 ease、linear、ease-in、ease-out 或 ease-in-out 预设出发，再进行微调。
一键复制代码
复制 cubic-bezier() 值或完整的 transition 声明语句。
适用场景
界面动效
调整按钮、弹窗和面板的过渡方式，使动效更加自然流畅。
微交互
为小型交互添加细微的超越或预期效果，增添产品个性。
统一缓动风格
定义一条自定义曲线并在整个项目中复用，保持视觉一致性。
学习了解
通过观察控制点如何影响动画，深入理解缓动函数的工作原理。
注意事项
- x 值被限制在 0–1 之间，因为时间不能倒退。
- y 值可以超出 0–1 范围，用于创建弹跳或超越效果。
- 内置预设近似于标准 CSS 关键字对应的曲线。
- 所有操作在您的设备上运行，不会上传任何内容。
常见问题
- 什么是 cubic-bezier 缓动？
- 它是 CSS transition 和 animation 的时间函数，由两个控制点定义，写作 cubic-bezier(x1, y1, x2, y2)，决定属性随时间变化的方式。
- y 值可以超过 1 或小于 0 吗？
- 可以。y 值超出 0–1 范围会使动画产生超越或回弹效果，类似弹跳感。只有 x 值必须限制在 0–1 之间。
- 这与 ease 和 ease-in-out 有什么关系？
- 这些关键字本身就是特定的 cubic-bezier 曲线。可以从对应预设出发，再拖动控制点进行自定义。
- 复制的结果该粘贴到哪里？
- 将 cubic-bezier() 值作为 transition 或 animation 的时间函数使用，例如 transition: all 0.4s cubic-bezier(...)。
- 会向服务器发送任何内容吗？
- 不会。编辑器完全在浏览器中运行，不会上传任何内容。