〰️ Generador CSS de Easing y Temporización

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).

Guía: Editor de Curvas Cubic-Bezier CSS

¿Qué es?

cubic-bezier(x1,y1,x2,y2) define la curva de aceleración de animaciones y transiciones mediante dos puntos de control. Determina si la animación empieza rápido y frena (ease-out), comienza lento (ease-in), o tiene ritmo natural.

Cómo usar

Arrastra los puntos de control en la gráfica.
Observa la animación de previsualización en tiempo real.
Copia el valor CSS para tu transición.

Consejos

Para elementos que "salen", usa ease-in; para los que "entran", ease-out.
Y mayor que 1 produce animaciones con efecto "rebote" — spring effect.
cubic-bezier(0.34,1.56,0.64,1) simula un rebote suave natural.