〰️ CSS Cubic-Bezier Visualizer
Create CSS cubic-bezier easing curves with a visual editor. Drag control points and preview animation in real time. Copy the CSS transition value. Free cubic-bezier generator.
How to Use
1
Drag the control points
Click and drag the two colored handles on the SVG canvas to define your easing curve shape.
2
Preview the animation
Click Play to see a box animate using your cubic-bezier curve. Try preset buttons for common easings.
3
Copy the function
Click Copy to copy the cubic-bezier() value. Use it in your CSS transition or animation.
Frequently Asked Questions
What is cubic-bezier in CSS?
cubic-bezier() is a CSS timing function that controls the speed curve of transitions and animations. It takes four values (P1x, P1y, P2x, P2y) that define two control points of a Bézier curve between (0,0) and (1,1).
What do the four values in cubic-bezier mean?
The four values are x1, y1, x2, y2 — the coordinates of two control points. x values must be between 0 and 1 (they represent time). y values can be outside 0–1, which creates bounce or overshoot effects.
What are the built-in CSS easing functions?
ease is cubic-bezier(0.25,0.1,0.25,1). ease-in is cubic-bezier(0.42,0,1,1). ease-out is cubic-bezier(0,0,0.58,1). ease-in-out is cubic-bezier(0.42,0,0.58,1). linear is cubic-bezier(0,0,1,1).
How do I create a bounce animation with cubic-bezier?
Set y values outside the 0–1 range to create overshoot. For example, cubic-bezier(0.34,1.56,0.64,1) creates a spring-like bounce where the element overshoots and settles back.
Where can I use cubic-bezier in CSS?
Use it in the transition-timing-function or animation-timing-function properties. Example: transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94).
完整指南：CSS cubic-bezier曲线编辑器
什么是cubic-bezier？
cubic-bezier(x1,y1,x2,y2)通过两个控制点定义动画和过渡的加速曲线。决定动画是先快后慢（ease-out）、先慢后快（ease-in）还是自然节奏（ease-in-out）。
如何使用
- 在图表上拖动控制点修改曲线。
- 实时观察预览动画。
- 复制CSS值用于你的过渡。
专业技巧
- "退出"屏幕的元素用
ease-in；"进入"的元素用ease-out。 - Y值大于1会产生"弹跳"效果——弹簧效果。
cubic-bezier(0.34,1.56,0.64,1)模拟自然柔和弹跳。