CSS 立方贝塞尔生成器
创建 CSS 立方贝塞尔缓动函数
Control Points
Point P1 (x1, y1)
0
0.25
1
0
0.1
1
Point P2 (x2, y2)
0
0.25
1
0
1
1
Popular Easing Presets
CSS Output
cubic-bezier(0.25, 0.1, 0.25, 1)
Preview
Duration: 500ms
Bezier Curve Visualization
x1
0.25
y1
0.1
x2
0.25
y2
1
Cubic Bezier Documentation
What is a Cubic Bezier Curve?
A cubic Bezier curve is defined by four points: P0, P1, P2, and P3. In CSS transitions, P0 and P3 are fixed at (0, 0) and (1, 1) respectively, representing the start and end of the transition. The curve is determined by the coordinates of the two control points, P1 and P2.
CSS Syntax
transition-timing-function: cubic-bezier(x1, y1, x2, y2);
Common Use Cases
- 动画过渡：为属性发生变化的元素创建平滑动画。
- 滚动效果：控制滚动动画的速度。
- 交互元素：定义元素对用户交互（如悬停或点击）的响应方式。
- 运动设计：为UI元素设计复杂的运动序列。
常用缓动函数
Ease（默认）
起始缓慢，快速加速，然后再次减速。
cubic-bezier(0.25, 0.1, 0.25, 1)
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)
创建自定义曲线的技巧
- 保持 x 值在 0 到 1 之间：超出此范围的值可能会导致意外行为。
- 可视化曲线：使用交互式图表了解更改对动画的影响。
- 使用真实元素进行测试：始终使用实际的 UI 组件预览曲线，以确保效果自然。
- 保存预设：将有用的曲线标记为书签，以便在未来项目中使用。