01
先按使用场景选起点
进入动效可先试 ease-out，常规状态变化可比较 ease 和 Material 预设。选预设会同时设置四个数值；继续拖动后显示为自定义，不会跳到另一条 URL。
HTML / CSS / 前端代码
贝塞尔曲线编辑器看得见的 CSS 缓动
拖动控制点或输入四个数值，确认有效后复制 CSS 曲线。
贝塞尔曲线编辑器
曲线输入
拖动控制点或用方向键微调；Shift 加方向键可加大步长。
CSS 结果
cubic-bezier(0.25, 0.1, 0.25, 1)动画预览
曲线和粘贴的数值仅在当前浏览器处理，不发送网络请求。
选项
虚线表示匀速进度，可与当前曲线对照。
曲线已更新。
动画看着生硬，往往不是位移距离错了，而是起步与收尾的速度不合适。贝塞尔曲线编辑器把这两个阶段画成可拖动的控制点；先选一个熟悉的预设，再微调到适合组件的节奏。
已有 cubic-bezier 生成器给出的数值也能直接贴入继续修改。打开线性参考线、播放动画预览，比只读一串贝塞尔曲线函数更容易看出过冲、回拉与减速的差别。
为什么用贝塞尔曲线编辑器？
图形与数字一起改，生成前就能看到真实的运动效果。
拖拽与精确数值保持同步
两个控制点、四个参数与 CSS 结果对应同一条曲线。贝塞尔曲线编辑器可以导入设计系统里已有的函数；手动输入的精度会保留，不会为了显示好看擅自截成两位小数。
错误的 X 值不会被偷偷修正
CSS 只限制 X1 和 X2 在 0 到 1 之间，Y 则可以超出这个范围。贝塞尔曲线编辑器在拖动时守住 X 边界；手动输入超界值时保留原文并指出错误，Y 大于 1 仍能做出单次超调。
从预设到可用 CSS 的三个关键检查
02
分别调起步与收尾
第一个控制点主要影响起步，第二个主要影响结束。拖拽 X 到边界就停，手输超界会报错；Y 可以小于 0 或大于 1，用于回拉或一次过冲。
03
按实际时长重播
预览默认 1000 毫秒，修改时长后要再点播放。时长只影响预览，不会混进复制的函数；关闭自动更新后，可按 Ctrl/Cmd+Enter 生成当前结果。
曲线、预览与 CSS 输出如何配合
四种入口指向同一条曲线
拖动手柄、方向键、数值输入和粘贴函数都会更新同一组控制点。线性参考线可切换，方便判断 CSS 缓动曲线相对匀速运动是在加速还是减速。
浏览器按真实计时函数播放
动画预览使用生成的 cubic-bezier() 作为浏览器动画缓动，不把曲线的内部参数误当成时间。可反复重播来比较 ease-out 与超调预设，但不会自动循环。
按用途复制两种 CSS
只复制函数值可放进 animation 简写；复制 transition-timing-function 声明可直接放进规则块。任何输入变化都会让旧结果过期，此时两个复制动作都会停用。
四个参数的有效范围与功能边界
- X 有边界，Y 允许超调
- X1、X2 必须介于 0 和 1，拖拽时会停在边界。贴入或手输的超界 X 不会被悄悄裁剪，而是保留原值并报出字段；负 Y 和大于 1 的 Y 都是有效的 CSS 数值。
- 单段曲线不等于弹簧
- 一条 cubic-bezier() 可以先回拉或越过终点再收住，却不能产生多次弹跳，也不模拟物理弹簧。需要连续回弹时应改用关键帧或弹簧模型。
- 预览时长不进入函数
- 时长必须是正的有限毫秒数，只决定预览播放多久。复制结果仍只有四个参数；播放需要主动触发，不会在调参时无休止循环。
- 只处理单条 CSS 缓动函数
- 本页不读取整份样式表、不上传文件、不生成完整 @keyframes，也不导出 Tailwind 或 JavaScript 动画配置。预设不会各自生成一个独立页面。
贝塞尔曲线编辑器常见问题
cubic-bezier 的 4 个数字到底是什么？
依次是 X1、Y1、X2、Y2，表示两处可移动控制点；起点 (0,0) 和终点 (1,1) 固定。X 对应时间输入，Y 对应运动进度。
为什么 Y 值可以超过 1 或低于 0？
CSS 规范只给 X 加 0 到 1 的限制。Y 大于 1 可让进度暂时越过终点，负 Y 可先向反方向回拉；本页会保留这些有效数值。
ease / ease-in / ease-out 区别一句话讲清？
ease 先温和加速再减速；ease-in 慢起快收；ease-out 快起慢收。选预设并用相同时长播放，差别会比只看数字直观。
我如何使用输出？
复制 cubic-bezier() 函数放进 transition 或 animation 的计时位置；也可以复制完整的 transition-timing-function 声明。时长需要在自己的 CSS 规则里另行设置。
预览对 CSS 的准确性如何？
预览直接让浏览器用生成的 cubic-bezier() 执行动画，因此对该浏览器的计时函数是实际效果。它不模拟你页面里的具体属性、距离或复合动画，最终仍应在目标组件上检查。
还有疑问？