拖两个手柄读出 cubic-bezier() 五种内置预设、动效预览、任意进度反解 y 值、浏览器本地运行
- 本地处理
- 分类 开发运维
- 适合 格式化、校验、压缩或检查和代码相关的文本。
控制点 1
x 0.25
y 0.1
控制点 2
x 0.25
y 1
x 固定在 0 到 1 之间, 时间只能向前推进
y 可以超出 0–1, 用来做超调和回弹
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
时长1.0s
进度 (x)
0.5
缓动值 (y)
0.802
输入进度 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。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。