拖两个手柄读出 cubic-bezier() 五种内置预设、动效预览、任意进度反解 y 值、浏览器本地运行
- 本地处理
- 分类 开发运维
- 适合 格式化、校验、压缩或检查和代码相关的文本。
x 固定在 0 到 1 之间, 时间只能向前推进
y 可以超出 0–1, 用来做超调和回弹
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
输入进度 t (0 到 1), 读出缓动后的输出值
这个工具能做什么
可视化的 CSS 缓动曲线 cubic-bezier 生成器, 用于 transition 过渡和 animation 动画。cubic-bezier() 计时函数由四个数定义, cubic-bezier(x1, y1, x2, y2) 就是一条曲线中间两个控制点的坐标, 这条 曲线的起点固定在 (0,0)、终点固定在 (1,1)。x 轴是时间进度, 只能落在 0 到 1 之间; y 轴是缓动后的输出, 可以低于 0 或高于 1, 用来做预备、 超调和回弹。在 SVG 曲线上直接拖两个手柄, 或者用滑块微调每个数值, 工具会替你写好 transition-timing-function 这一行。点一下就能载入 ease / linear / ease-in / ease-out / ease-in-out 从已知曲线起步, 再用 动效预览看一颗小球按你设的时长沿曲线跑一遍。需要某一帧的值?反解器 把 x 反算成 y, 任意进度都读得出缓动输出。全部在浏览器里运算, 一键 复制, 分享链接能还原出完全一样的曲线。100% 浏览器本地, 不上传。
工具细节
- 输入
- 数值 + 结构化内容
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 预览
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 11 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 开发运维 · 程序员
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
CSS 缓动曲线生成器 适合怎么用
适合穿插在写代码、查问题、做 Review、上线前的小任务里。
适合开发场景
- 格式化、校验、压缩或检查和代码相关的文本。
- 把片段整理好再放进文档、工单、提交或交接材料。
- 不切换工具,快速检查一个小 payload。
开发检查项
- 压缩、混淆这类不可逆处理,先对副本操作。
- 除非确认工具本地处理,不要粘贴密钥和敏感片段。
- 转换后的代码上线前,仍要跑自己的测试或 lint。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
把超调角标的曲线在全组锁死
通知角标要弹出时带一点超调,但 ease-out 显得没生气。把第二个手柄的 y 拖到 1 以上,让曲线冲过目标再落定,用动效预览按 0.3 秒看小球弹多远,再把 cubic-bezier(0.68,-0.55,0.27,1.55) 复制进 keyframes 的 animation-timing-function,每次构建都弹得一模一样。
读中点缓动值排查跳变
过渡走到一半像是猛地一窜。用预设或四个数把线上那条曲线载入,再用反解器读进度 0.5 处的 y。如果你预期约 0.5 它却读出 0.85,说明动作全堆在前半段。重新拖手柄直到中点落在你要的位置,复制改好的这一行。
常见踩坑
把 x 填到 0 到 1 之外。时间只能向前,所以 x1 和 x2 必须留在 0 到 1,像 1.4 这样的值会让曲线向回折叠、缓动失效。只有 y 能低于 0 或高于 1。
把手柄的 y 位置当成那一刻的数值。曲线把时间 x 映射成输出 y,想知道某个进度处的 y 请用反解器,别拿手柄位置目测。
复制了曲线却忘了设时长。计时函数只塑造动作怎么走,没有 transition 或 animation 的时长,曲线就没有东西可弯,缓动看不出任何效果。
隐私说明
曲线计算、反解 y、动效预览和复制按钮全都是浏览器标签页里运行的纯 JavaScript。曲线、数值和设置都不会发到服务器,也不记录任何东西。唯一要说明的是,分享链接会把四个参数写进查询字符串,把链接粘到聊天里,对方服务器的访问日志会留下这些数字。它们只是缓动坐标,没有敏感信息可泄露。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。