〰️ CSS 缓动与动画时序生成器

Design CSS cubic-bezier easing curves visually. Drag handles, preview animations, pick from presets like ease, ease-in-out, spring. Copy CSS free.

Drag the two bezier control points to shape your animation curve, or pick from preset easings (ease, spring, bounce). The preview animates a ball using your curve so you see exactly how it feels — then copy the cubic-bezier() value for your CSS transition or animation.

P1 X

P1 Y

P2 X

P2 Y

CSS Value

How to Use

Drag the control points

Click and drag the two colored handles on the SVG canvas to define your easing curve shape.

Preview the animation

Click Play to see a box animate using your cubic-bezier curve. Try preset buttons for common easings.

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)模拟自然柔和弹跳。