CSS 缓动函数生成器

拖动控制点编辑 cubic-bezier 曲线,复制缓动代码

工具面板

本地处理
正在加载工具...
关于CSS 缓动函数生成器

拖动两个控制点编辑缓动曲线,旁边用匀速运动做对照,能直观看出「快起慢停」这类差别。曲线直接输出为 cubic-bezier()。

  • 1

    横轴是进度、纵轴是位移;编辑区纵轴特意留到 −0.5 ~ 1.5,因为「回弹」类曲线的控制点本来就在 0–1 之外(默认这组是 0.34, 1.56, 0.64, 1)。

  • 2

    横轴被限制在 0–1:CSS 规范要求两个控制点的 x 落在 [0,1],越界整条曲线作废;纵轴越界是合法的,正是预备与回弹效果的来源。

  • 3

    右侧有与线性运动的对照演示,可以直接看出缓动在哪些时间点加速、哪些点减速;输出是 `transition-timing-function: cubic-bezier(...)`。

相关工具

查看全部
设计工具

颜色选择器

选择并提取 HEX、RGB、HSL 颜色值

设计工具
设计工具

颜色对比度

检查前背景色对比是否符合的可访问性标准

设计工具
设计工具

渐变色生成器

可视化创建漂亮的 CSS 线性或径向渐变

设计工具
设计工具

CSS 阴影生成器

可视化调节并复制 box-shadow 代码

设计工具

单位换算

各领域物理单位的精准换算

设计工具
设计工具

字节转换

在 B, KB, MB, GB, TB 间进行转换

设计工具
设计工具

CSS 圆角生成器

可视化调节四角圆角并复制 border-radius 代码

设计工具

CSS 裁剪路径生成器

拖动顶点调整形状,复制 clip-path: polygon() 代码