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.

¿Cómo importo o reflejo un valor cubic-bezier() existente?

Pega cualquier valor en el campo Importar de la parte superior de la tarjeta Código CSS y pulsa Importar (o presiona Enter). El editor lo interpreta, carga los dos puntos de control en el lienzo y reproduce la vista previa para que visualices y refines una curva que ya tienes.

Formatos aceptados:

- Un valor completo: cubic-bezier(0.34, 1.56, 0.64, 1)
- Una lista simple: 0.34, 1.56, 0.64, 1
- Una palabra clave CSS: linear, ease, ease-in, ease-out o ease-in-out

Es el inverso del botón Copiar, convirtiendo la herramienta en un editor de ida y vuelta para auditar valores de easing de tokens de diseño (Material Design 3), una exportación de Figma, configuración de Framer Motion o la hoja de estilos de un compañero. Los valores X se recortan a 0–1 y los Y a -2–2; lo que no se pueda interpretar muestra un aviso de error.

Para reflejar una curva (convertir ease-in en ease-out o viceversa), intercambia e invierte los puntos: la curva cubic-bezier(x1, y1, x2, y2) se invierte a cubic-bezier(1-x2, 1-y2, 1-x1, 1-y1). Por ejemplo, ease-in cubic-bezier(0.42, 0, 1, 1) se refleja en ease-out cubic-bezier(0, 0, 0.58, 1). Importa la original, lee los valores y luego importa el conjunto reflejado para comparar ambas direcciones.

¿Qué easing es más eficiente y accesible?

La función cubic-bezier() en sí no tiene coste de rendimiento medible — lo que importa es la propiedad que animas. Anima solo transform y opacity, que el navegador puede componer en la GPU. Animar propiedades de layout (width, top, margin) fuerza reflows en cada fotograma sin importar el easing.

Consejos de rendimiento para cualquier timing function:

- Usa will-change: transform con moderación para avisar al compositor, y quítalo al terminar la animación para no malgastar memoria.
- Las curvas overshoot (ease-out-back, ease-in-out-back) repintan un área algo mayor; mantenlas en transform/opacity.
- Easings suaves como ease-out-quad cubic-bezier(0.5, 1, 0.89, 1) o ease-out-cubic cubic-bezier(0.33, 1, 0.68, 1) se ven pulidos y siguen siendo baratos.

Por accesibilidad, respeta siempre prefers-reduced-motion: envuelve la animación no esencial en @media (prefers-reduced-motion: no-preference) { ... }, o desactívala en @media (prefers-reduced-motion: reduce). La curva que elijas aquí no se ve afectada por reduced-motion — es tu media query la que respeta la preferencia del usuario. Evita overshoot o rebotes grandes (ease-in-back cubic-bezier(0.36, 0, 0.66, -0.56), ease-in-quad cubic-bezier(0.11, 0, 0.5, 0)) para quienes piden movimiento reducido, ya que el movimiento fuerte puede causar molestias vestibulares.

¿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)
• Campo de importación para pegar y visualizar un valor cubic-bezier() existente o palabra clave
• 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