CSS 缓动曲线编辑

调整 cubic-bezier 控制点，查看指定进度的输出并下载 CSS 时间函数。

输入数据

输入更改时会清除旧输出。

结果

输入数据或填入示例，再运行工具。

计算示例

线性 (0,0,1,1) 将 0.5 对应到 0.5；默认 ease 约 0.8024，不是直接取 y(t=0.5)。

方法

以 Newton 与有界二分法解 x(t)＝进度，再求 y(t)，保留超出范围的输出。

适用限制

X 控制点限 0–1、Y 限 −10–10；这是时间曲线，不是物理弹簧。预览需手动开始、可停止，减少动画时直接显示终点。

来源

MDN cubic-bezier 时间函数

相关工具

CSS 属性语法检查 CSS 浏览器前缀生成 CSS 选择器结构拆解 CSS 色彩空间与色域转换

输入数据保留在此设备。只有经您同意的可选浏览量会被统计；计算值、文件、文件名与处理日志不发送至 Analytics。

切换语言时，文本、设置与所选文件会暂存于此设备，恢复后移除；中断的暂存会于后续访问清理。输入与文件不会上传。