Generador de Cubic-Bezier CSS

¿Qué es esta herramienta?

cubic-bezier() es una función de tiempo de CSS que controla cómo un valor animado o en transición acelera y desacelera con el tiempo, en lugar de moverse a un ritmo constante. Se define mediante dos puntos de control — (x1, y1) y (x2, y2) — que curvan una línea entre un punto de inicio fijo (0,0) y un punto final fijo (1,1). Los valores de x deben estar entre 0 y 1, pero los de y pueden salirse de ese rango para crear efectos de rebote o exceso de recorrido.

Ajustar a mano cuatro números decimales hasta lograr una sensación que no sea ni brusca ni blanda requiere mucho ensayo y error. Esta herramienta sustituye ese tanteo por manipulación directa: mueve un control deslizante, observa cómo se curva la línea y se mueve la bola de vista previa en consecuencia, y copia el CSS cuando el movimiento se sienta bien.

Fuente: CSS Easing Functions Level 1, W3C — la especificación que define cubic-bezier() y las cinco palabras clave con nombre en las que se basan los preajustes de esta herramienta.

¿Por qué utilizarlo?

• Un gráfico SVG en vivo muestra exactamente cómo se curva tu línea entre los puntos fijos de inicio y fin, con ambos puntos de control y sus líneas trazados con claridad.
• El botón de reproducción anima un elemento de vista previa a lo largo de una pista usando tu curva exacta, para que sientas el movimiento y no solo veas un gráfico estático.
• Preajustes de un clic para las cinco funciones de aceleración estándar con nombre — ease, ease-in, ease-out, ease-in-out y linear — según la especificación CSS Easing Functions.
• Los valores de y pueden bajar de 0 o superar 1, lo que permite crear efectos de rebote o exceso de recorrido que las palabras clave con nombre no pueden producir.
• Genera CSS de transition-timing-function listo para pegar — el mismo valor también funciona en animation-timing-function.
• Se ejecuta enteramente en tu navegador — nada de lo que configures se sube a ningún sitio. Gratis, sin registro.

Cómo utilizarlo

1. Arrastra los controles x1/y1 para fijar el primer punto de control, que da forma al inicio de la animación.
2. Arrastra los controles x2/y2 para fijar el segundo punto de control, que da forma al final de la animación.
3. Observa la curva negra del gráfico — si se abomba por encima de la diagonal al principio, el movimiento arranca rápido; si se mantiene por debajo, arranca lento.
4. Pulsa Reproducir para ver un elemento de vista previa moverse por la pista usando tu curva como transition-timing-function.
5. Prueba un preajuste (ease, ease-in, ease-out, ease-in-out, linear) como punto de partida y luego ajusta los controles desde ahí.
6. Copia el CSS generado y pégalo en una regla de transición o animación.

Ejemplo

Entrada

x1: 0.25, y1: 0.1, x2: 0.25, y2: 1

Resultado

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Estos son los puntos de control exactos de la palabra clave estándar ease de CSS — arranque rápido, luego una desaceleración gradual hasta el final.

Por qué los valores de y pueden salirse de 0–1

A diferencia del eje x, que representa el tiempo y debe ir de 0 a 1, el eje y representa el progreso del valor animado y no tiene ese límite. Fijar y1 por debajo de 0 o y2 por encima de 1 hace que la curva se hunda antes del valor inicial o se dispare más allá del valor final antes de asentarse — la base de los efectos de exceso de recorrido y anticipación usados en pulsaciones de botones, aparición de modales y micro-interacciones lúdicas. Ninguna de las cinco palabras clave con nombre (ease, ease-in, ease-out, ease-in-out, linear) puede producir esto; para ello se necesita un cubic-bezier() personalizado.

transition-timing-function frente a animation-timing-function

El valor cubic-bezier() que genera esta herramienta funciona igual en ambas propiedades. Usa transition-timing-function cuando el movimiento lo dispara un cambio de estado (como un hover o un cambio de clase), y animation-timing-function dentro de una regla de animación impulsada por @keyframes cuando necesitas esa misma sensación de aceleración aplicada automáticamente o en bucle.

Patrones de aceleración comunes

• Respuesta de interfaz ágil (botones, interruptores): mantén los puntos de control cerca de la diagonal con un ligero sesgo ease-out, por ejemplo cubic-bezier(0.4, 0, 0.2, 1).
• Curva estándar de Material Design: cubic-bezier(0.4, 0, 0.2, 1) — arranque rápido, final suave, muy usada en transiciones de paneles y tarjetas.
• Rebote/exceso de recorrido: sube y2 por encima de 1, por ejemplo cubic-bezier(0.34, 1.56, 0.64, 1), para una sensación lúdica al aparecer.
• Anticipación antes del movimiento: baja y1 por debajo de 0 para que el elemento retroceda ligeramente antes de avanzar.
• Ease-in-out suave para animaciones en bucle: mantén la curva casi simétrica respecto al centro.

Combinar con otras herramientas CSS

Una curva de aceleración rara vez va sola — normalmente se aplica a un elemento que también necesita sombras, esquinas redondeadas o degradados. Genera el estilo visual con las otras herramientas CSS de abajo y luego añade la función de tiempo de esta herramienta a la misma regla o declaración de transición/animación.

→ Generador de Box Shadow · Generador de Border Radius

Preguntas frecuentes