Editor de Cubic Bezier

Editor de Cubic Bezier - Generador Visual de Curvas Easing CSS

Diseña curvas de easing personalizadas para CSS con un editor visual interactivo. Arrastra dos puntos de control para dar forma a cualquier función cubic-bezier(), observa la animación en vivo y compárala con palabras clave estándar como ease-in-out. Copia el código CSS listo para pegar en tus transiciones y animaciones.

¿Qué es una función cubic-bezier() en CSS?

Una función cubic-bezier() describe cómo una transición o animación CSS progresa con el tiempo. En lugar de moverse a velocidad constante, la animación puede acelerar, decelerar, sobrepasar o rebotar según una curva definida por cuatro números.

Sintaxis: cubic-bezier(x1, y1, x2, y2)

La curva siempre comienza en (0, 0) y termina en (1, 1). Los puntos de control P1 = (x1, y1) y P2 = (x2, y2) deforman la curva. El eje X representa el tiempo (0 a 1) y el eje Y el progreso de la animación.

Si la curva sube rápido al principio, la animación arranca rápido. Si sube lentamente y acelera después, obtienes una sensación ease-in. Si los valores Y salen del rango [0, 1], la animación se pasa de largo: así nacen los efectos back/bounce.

¿Cómo se usa este editor de cubic-bezier?

Tres formas de diseñar la curva:

1. Arrastra los dos puntos azules en el lienzo para reformar la curva visualmente. Corresponden a P1 y P2 de cubic-bezier(x1, y1, x2, y2).
2. Escribe los valores exactos en los campos X1/Y1/X2/Y2 si necesitas precisión.
3. Haz clic en cualquier preset (ease, ease-in-out, ease-out-back, etc.) para cargar una curva conocida y modificarla.

Después pulsa Reproducir para ver una bola animada usando tu easing. Usa el menú Comparar para correr una segunda bola con una palabra clave CSS estándar y notar la diferencia. El código CSS aparece abajo: pulsa Copiar para pegarlo en tu hoja de estilos.

Para accesibilidad, los puntos de control son enfocables con Tab y se ajustan con flechas (Mayús para pasos grandes).

¿Diferencia entre ease, ease-in, ease-out y ease-in-out?

Son las cuatro palabras clave estándar de easing en CSS y cada una equivale a un cubic-bezier() específico:

- ease: cubic-bezier(0.25, 0.1, 0.25, 1) — inicio rápido, final lento. Valor por defecto si no especificas timing function.
- ease-in: cubic-bezier(0.42, 0, 1, 1) — inicio lento, acelera hacia el final. Útil cuando un elemento abandona la pantalla.
- ease-out: cubic-bezier(0, 0, 0.58, 1) — inicio rápido, decelera al final. Ideal para elementos que entran en la pantalla.
- ease-in-out: cubic-bezier(0.42, 0, 0.58, 1) — lento en ambos extremos, rápido en el medio. Simétrico y natural.

Nota: 'linear' equivale a cubic-bezier(0, 0, 1, 1) — velocidad constante sin easing. Para la mayoría de animaciones UI, ease-out es la opción más pulida porque transmite inercia física.

¿Qué son las curvas overshoot y anticipation?

Las curvas overshoot empujan la animación más allá de su valor final antes de asentarse, creando un rebote o efecto 'back' divertido. Las anticipation hacen lo contrario: tiran ligeramente hacia atrás antes de avanzar, imitando cómo un objeto real toma impulso.

En cubic-bezier(), esto se logra con valores Y fuera del rango [0, 1]:

- Overshoot (ease-out-back): cubic-bezier(0.34, 1.56, 0.64, 1) — el Y del segundo punto supera 1, la curva pasa del 100% antes de estabilizarse.
- Anticipation (ease-in-back): cubic-bezier(0.36, 0, 0.66, -0.56) — el Y del segundo punto es negativo, el valor baja momentáneamente bajo 0.
- Fuerte en ambos lados: cubic-bezier(0.68, -0.6, 0.32, 1.6).

Este editor permite Y entre -2 y 2 para experimentar libremente. Funcionan genial en modales, marcas de éxito y cualquier animación con personalidad.

¿Dónde uso el valor cubic-bezier() generado?

Pégalo en cualquier propiedad timing-function de CSS. Los dos casos más comunes:

1. transition-timing-function en una transición:
.button {
transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

2. animation-timing-function en @keyframes:
.card {
animation: fadeIn 600ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

También funciona en librerías de animación:
- Framer Motion: transition={{ ease: [0.34, 1.56, 0.64, 1] }}
- GSAP: gsap.to(el, { x: 100, ease: 'cubicBezier(0.34, 1.56, 0.64, 1)' })
- Web Animations API: el.animate(frames, { easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)' })

Algunos sistemas como Material Design 3 publican tokens cubic-bezier recomendados — escríbelos en X1/Y1/X2/Y2 para visualizarlos.

¿Por qué los valores X están restringidos a 0–1?

Las coordenadas X (x1 y x2) deben estar entre 0 y 1, y este editor lo aplica automáticamente. Razón matemática: el eje X representa el tiempo, que debe avanzar monotónicamente. Si un punto de control saliera de [0, 1] o retrocediera, la curva podría doblarse sobre sí misma, generando dos progresos distintos para el mismo instante — comportamiento no definido en CSS.

Los valores Y, en cambio, son libres de salir del rango [0, 1]. Y representa el progreso, y el progreso puede sobrepasar el destino (Y > 1) o retroceder temporalmente (Y < 0). Eso habilita los efectos back/bounce.

Si introduces un X fuera de rango, el editor lo recorta a 0 o 1 automáticamente.

¿En qué se diferencia de CSS spring() o linear()?

cubic-bezier() es la función de easing original de CSS, soportada en todos los navegadores desde 2008. Usa dos puntos de control para definir una curva.

Alternativas más nuevas:

- Función linear() (CSS Easing Functions Level 2): describe un easing como una lista de puntos. Útil para curvas arbitrarias o medidas — por ejemplo, muelles con varios rebotes que un bezier no puede representar. Soporte en Chromium moderno, Safari 17.4+ y Firefox 112+.

- @starting-style y view transitions siguen usando funciones de easing estándar como cubic-bezier().

- Spring physics (Framer Motion, React Spring) es otro modelo: simula un sistema masa-resorte en vez de evaluar una curva fija.

Para CSS de producción hoy, cubic-bezier() sigue siendo lo más compatible y predecible. Usa linear() cuando necesites un rebote real (varios picos) imposible con un bezier único.

¿Esta herramienta es privada? ¿Envía mis curvas a algún sitio?

Totalmente privada. Todo ocurre en tu navegador:

- Ningún dato se envía a servidores
- Sin cuentas, sin registros y sin seguimiento de tu edición
- Funciona sin conexión una vez cargada la página
- No carga librerías externas para el editor — es JavaScript vainilla
- El código CSS generado solo sale de tu dispositivo cuando decides copiarlo

Puedes comprobarlo abriendo la pestaña Red de tu navegador mientras editas la curva: no verás peticiones. Solo la carga inicial y los recursos comunes del sitio (fuentes, iconos).

Características Principales

• Editor de curva interactivo con arrastrar y soltar
• Dos puntos de control arrastrables con actualización en vivo
• Bola de animación que reproduce tu easing
• Comparación lado a lado con palabras clave CSS estándar
• Duración ajustable de 0.2s a 4s
• 12 plantillas de easing con nombre (ease, ease-in-out, ease-out-back y más)
• Campos numéricos para coordenadas X/Y precisas
• Soporta overshoot y anticipation (Y entre -2 y 2)
• Genera código CSS cubic-bezier() listo para copiar
• Exporta transition-timing-function y animation-timing-function
• Puntos de control accesibles por teclado con flechas
• Compatible con Framer Motion, GSAP y Web Animations API
• 100% cliente, sin datos enviados a ningún servidor
• Funciona sin conexión después de la primera carga
• Modo oscuro y diseño responsivo amigable para móviles