CSS3 贝塞尔曲线工具

可视化生成 CSS cubic-bezier() 缓动函数代码。拖拽控制点调整曲线，实时预览动画效果，支持 29 种预设缓动模板，一键复制 CSS 代码。

动画预览

曲线参数

预设曲线模板（共 29 种）

基础缓动

linear0, 0, 1, 1

ease0.25, 0.1, 0.25, 1

ease-in0.42, 0, 1, 1

ease-out0, 0, 0.58, 1

ease-in-out0.42, 0, 0.58, 1

缓入曲线

easeInQuad0.55, 0.085, 0.68, 0.53

easeInCubic0.55, 0.055, 0.675, 0.19

easeInQuart0.895, 0.03, 0.685, 0.22

easeInQuint0.755, 0.05, 0.855, 0.06

easeInSine0.47, 0, 0.745, 0.715

easeInExpo0.95, 0.05, 0.795, 0.035

easeInCirc0.6, 0.04, 0.98, 0.335

easeInBack0.6, -0.28, 0.735, 0.045

缓出曲线

easeOutQuad0.25, 0.46, 0.45, 0.94

easeOutCubic0.215, 0.61, 0.355, 1

easeOutQuart0.165, 0.84, 0.44, 1

easeOutQuint0.23, 1, 0.32, 1

easeOutSine0.39, 0.575, 0.565, 1

easeOutExpo0.19, 1, 0.22, 1

easeOutCirc0.075, 0.82, 0.165, 1

easeOutBack0.175, 0.885, 0.32, 1.275

缓入缓出曲线

easeInOutQuad0.455, 0.03, 0.515, 0.955

easeInOutCubic0.645, 0.045, 0.355, 1

easeInOutQuart0.77, 0, 0.175, 1

easeInOutQuint0.86, 0, 0.07, 1

easeInOutSine0.445, 0.05, 0.55, 0.95

easeInOutExpo1, 0, 0, 1

easeInOutCirc0.785, 0.135, 0.15, 0.86

easeInOutBack0.68, -0.55, 0.265, 1.55

CSS 代码

cubic-bezier(0.25, 0.10, 0.25, 1.00)

/* 使用示例 */
transition: all 0.3s cubic-bezier(0.25, 0.10, 0.25, 1.00);

/* 或使用简写 */
transition-timing-function: cubic-bezier(0.25, 0.10, 0.25, 1.00);
animation-timing-function: cubic-bezier(0.25, 0.10, 0.25, 1.00);