← 首页
English

cubic-bezier 编辑器

拖拽控制点设计 CSS 缓动曲线

实时预览
ease
linear
ease-in
ease-out
ease-in-out
回弹（back）
Material 标准
Material 加速
Material 减速
超调（overshoot）
cubic-bezier(0.25, 0.1, 0.25, 1)

使用方法

  • 拖动曲线区域的粉色和紫色控制点来调整缓动形状
  • 或直接编辑 x1/y1/x2/y2 数值（通常 0-1，y 可超出实现超调/反弹效果）
  • 点击"播放"预览动画，根据需要调节时长
  • 点击底部 cubic-bezier() 代码复制到剪贴板

提示

  • x 必须在 0-1（时间进度）；y 可以为负或 > 1（实现超调）
  • Material Design 的 cubic-bezier(0.4, 0, 0.2, 1) 是最常用的"自然"曲线
  • UI 设计：进入用 ease-out，退出用 ease-in