EN
PT
ES
Visualizador de Easing CSS / Cubic-Bezier
Arrastra las manijas en SVG, escribe valores o elige entre 30+ curvas con nombre. Previsualización animada en vivo y salida lista para CSS, GSAP y Framer Motion.
¿Qué es una curva cubic-bezier?
Una curva cubic-bezier es una curva paramétrica definida por cuatro puntos: un inicio (siempre 0,0), un fin (siempre 1,1) y dos manijas de control cuyas coordenadas eliges. CSS, librerías de animación JavaScript y la mayoría de herramientas de diseño usan esta curva para mapear el progreso de animación (0 → 1) sobre el progreso de valor (0 → 1) — cuando la curva queda bajo la diagonal, la animación se atrasa y luego alcanza; arriba, salta y luego se asienta. Los cuatro números cubic-bezier(x1, y1, x2, y2) son simplemente las coordenadas de las dos manijas.
Cómo usar este visualizador
Arrastra las dos manijas coloreadas dentro del SVG para moldear la curva, o escribe los cuatro valores directamente. Elige entre 30+ presets con nombre — clásicos como easeOutCubic, el conjunto Robert Penner completo y curvas modernas de toolkits de UI (Material, swift-out de Apple). La previsualización animada en vivo mueve una forma con tu curva actual para que sientas el timing, no solo veas la forma. El panel de salida emite el mismo easing en tres sabores: CSS puro cubic-bezier(), GSAP CustomEase y tupla de array de Framer Motion — copia el que use tu stack.
Eligiendo la curva correcta
Usa curvas ease-out (manijas baja-luego-alta) para entradas — el contenido llega rápido y se asienta, sensación responsiva. Usa ease-in para salidas — el ojo no necesita seguir contenido que se va. Usa ease-in-out para movimientos en pantalla, como una tarjeta deslizándose de un slot a otro. Curvas con back / overshoot (donde y2 > 1) añaden personalidad en momentos lúdicos pero suenan inmaduras en UI financiera o de productividad. Linear raramente es la elección correcta para animación de UI — se siente mecánica para humanos aunque sea matemáticamente uniforme.
Preguntas frecuentes
¿Por qué los valores y a veces están fuera de 0–1?
x1 y x2 están restringidos a 0–1 por la spec (los puntos de control no pueden pasar los extremos del timeline), pero y1 y y2 pueden ir bajo 0 o sobre 1. Así funcionan los easings "back" — el valor brevemente sobrepasa su objetivo antes de asentar, como un resorte encajando.¿Por qué la curva Material coincide con un set de valores y Material 3 con otro?
(0,4, 0, 0,2, 1) vino con Material 1 en 2014. Material 3 (2021) introdujo una familia distinta basada en un sistema de spring custom que no se reduce a un cubic-bezier único — lo que ves aquí es la aproximación clásica más cercana. Para timing exacto de Material 3, usa los tokens oficiales de Google.¿Debería usar cubic-bezier o física de spring?
¿Puedo animar esto en CSS sin JavaScript?
transition-timing-function y animation-timing-function, ambas corriendo en el hilo del compositor del navegador sin una línea de JS. Las salidas de librerías solo son útiles si ya animas con esa librería — coloca el cubic-bezier en el campo ease.¿Cuál es la duración correcta?
¿Estas curvas funcionan en WebViews móviles?
cubic-bezier() ha estado en la spec CSS desde CSS3 y vino en cada navegador móvil para 2013. Los tipos de animación que ves aquí (transform translate / rotate / scale) también son compuestos por GPU en todas partes, así que la previsualización es representativa del rendimiento en producción.