无需登录 数据私有 本地保存

CSS 动画曲线编辑器 - 贝塞尔可视化重定义

12
0
0
0
拖拽控制点调整曲线 P1 P2
预设曲线
标准缓动
弹性 / 弹跳
创意曲线
控制点参数
P1 X 0.25 Y 0.10
P2 X 0.25 Y 1.00
缓入缓出
实时预览
0s0.5s1s
CSS 代码
cubic-bezier(0.25, 0.1, 0.25, 1)
用于 transition-timing-function 或 animation-timing-function
常见问题与知识点
什么是 CSS cubic-bezier() 函数？
cubic-bezier() 是 CSS 中定义动画缓动曲线的函数。它使用三次贝塞尔曲线来描述动画在时间上的变化速率。接受四个参数 (x1, y1, x2, y2)，分别定义两个控制点 P1 和 P2。起点固定为 (0,0)，终点固定为 (1,1)。x 值必须在 0–1 之间，y 值可以超出此范围来创建弹跳等特殊效果。
如何理解贝塞尔曲线的控制点？
P1(x1,y1) 控制动画开始阶段的曲率——P1 的 y 值越大，动画起步越快；P2(x2,y2) 控制动画结束阶段的曲率——P2 的 y 值越小，动画收尾越缓。直观理解：P1 是起点(0,0)的"引力点"，P2 是终点(1,1)的"引力点"，曲线被这两个点"拉向"它们。
CSS 中预设的缓动值对应什么参数？
• ease（默认）：cubic-bezier(0.25, 0.1, 0.25, 1.0) — 轻微缓入缓出
• linear：cubic-bezier(0, 0, 1, 1) — 匀速
• ease-in：cubic-bezier(0.42, 0, 1, 1) — 慢速开始
• ease-out：cubic-bezier(0, 0, 0.58, 1) — 慢速结束
• ease-in-out：cubic-bezier(0.42, 0, 0.58, 1) — 慢速开始和结束
y 值超出 0–1 范围会怎样？
当控制点的 y 值超出 [0,1] 范围时，动画会产生"超出"效果。例如 y 值 >1 会让动画在到达终点前冲过头再回来（类似弹跳），y 值 <0 则会让动画在开始时产生负向位移。这在设计弹性动画、弹簧效果时非常有用。需要注意的是 x 值必须保持在 0–1 之间，这是 CSS 规范的要求。
如何在项目中实际使用生成的曲线？
复制生成的 cubic-bezier() 代码后，可以这样使用：
transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
或
animation: myAnim 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
也可以定义 CSS 变量全局复用：--my-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
贝塞尔曲线和 CSS steps() 有什么区别？
cubic-bezier() 创建的是平滑连续的缓动曲线，适合自然过渡效果。而 steps() 创建的是阶梯式分段动画，适合逐帧动画或机械式过渡。两者可以结合使用：animation-timing-function: cubic-bezier(...) 用于平滑过渡，steps(n) 用于分步变化。
🔧 相关工具