Generador CSS Cubic Bezier - Crear Funciones de Aceleración Online
Crea curvas de aceleración CSS personalizadas con un editor visual interactivo. Arrastra puntos de control, previsualiza animaciones y copia el código cubic-bezier().
Preguntas Frecuentes
¿Qué es la función CSS cubic-bezier()?
La función CSS cubic-bezier() define una curva de aceleración Bézier cúbica que controla el ritmo de las transiciones y animaciones CSS. Acepta cuatro parámetros numéricos — cubic-bezier(x1, y1, x2, y2) — que definen dos puntos de control (P1 y P2) en una curva donde el eje X representa el progreso del tiempo (0 a 1) y el eje Y representa el progreso de la animación (0 a 1). El punto inicial P0 siempre es (0,0) y el punto final P3 siempre es (1,1). Al ajustar los puntos de control, determinas cómo la animación acelera, desacelera o sobrepasa.
¿Cómo uso este generador de cubic-bezier?
Arrastra los dos puntos de control (P1 y P2) en el gráfico interactivo para dar forma a tu curva de aceleración deseada, o ingresa valores numéricos precisos en los campos X1, Y1, X2, Y2. Observa la vista previa de la animación actualizarse en tiempo real. Opcionalmente selecciona un preset de aceleración de la biblioteca como punto de partida. Activa Comparar con Linear para ver cómo tu curva difiere del movimiento a velocidad constante. Copia el código CSS generado usando el botón de copiar.
¿Mis datos están seguros? ¿Se envía algo a un servidor?
Sí, tus datos están completamente seguros. Esta herramienta se ejecuta completamente en tu navegador usando JavaScript del lado del cliente. No se envían valores de bézier, configuraciones de animación ni ningún dato a ningún servidor. Todos los cálculos de curvas, renderizado de animaciones y generación de código ocurren localmente en tu dispositivo. Puedes usarla con confianza para trabajo de sistemas de diseño propietarios.
¿Qué significan los valores X e Y en cubic-bezier()?
Los cuatro valores definen dos puntos de control en un gráfico 2D. Los valores X (x1 y x2) representan puntos a lo largo del eje del tiempo y deben estar entre 0 y 1. Los valores Y (y1 e y2) representan puntos a lo largo del eje de progreso y pueden ser cualquier número. Cuando los valores Y están entre 0 y 1, la animación progresa normalmente. Cuando los valores Y van por debajo de 0 o por encima de 1, la animación temporalmente sobrepasa o queda por debajo del estado objetivo antes de estabilizarse.
¿Cuál es la diferencia entre ease, ease-in, ease-out y ease-in-out?
Son palabras clave CSS que corresponden a valores específicos de cubic-bezier. ease (0.25, 0.1, 0.25, 1) comienza ligeramente lento, acelera rápidamente y luego desacelera suavemente — es el valor predeterminado para transiciones CSS. ease-in (0.42, 0, 1, 1) comienza lento y acelera, útil para elementos que salen de la pantalla. ease-out (0, 0, 0.58, 1) comienza rápido y desacelera, ideal para elementos que entran en la pantalla. ease-in-out (0.42, 0, 0.58, 1) comienza lento, acelera en el medio y luego desacelera.
¿Cómo creo efectos de rebote o sobreimpulso?
Establece valores Y (y1 o y2) fuera del rango [0, 1]. Para un sobreimpulso al final (el elemento pasa del objetivo y luego regresa), establece y2 mayor que 1, por ejemplo cubic-bezier(0.34, 1.56, 0.64, 1). Para un subimpulso al inicio (el elemento se mueve brevemente hacia atrás antes de avanzar), establece y1 menor que 0. El gráfico del generador se extiende visualmente más allá del cuadro 0-1 para mostrar estas zonas de sobreimpulso.
¿Qué curva de aceleración debo usar para mi animación?
La mejor aceleración depende del contexto de la animación. Para entradas de UI (modales, menús desplegables apareciendo), usa ease-out o una curva Quart/Quint Out para desaceleración natural. Para salidas de UI (elementos desapareciendo), usa ease-in para aceleración suave. Para cambios de estado (cambios de color, ajustes de tamaño), ease-in-out proporciona aceleración equilibrada. Para interacciones lúdicas (retroalimentación de botones, micro-interacciones), usa una curva Back Out para sobreimpulso sutil. Evita linear para la mayoría de animaciones de UI ya que se siente mecánico.
Ejemplos de Código
function evaluateBezier(t, p0, p1, p2, p3) {
const u = 1 - t;
return u * u * u * p0 + 3 * u * u * t * p1 + 3 * u * t * t * p2 + t * t * t * p3;
}
function cubicBezierY(x, x1, y1, x2, y2) {
if (x <= 0) return 0;
if (x >= 1) return 1;
let low = 0, high = 1, mid;
for (let i = 0; i < 20; i++) {
mid = (low + high) / 2;
const cx = evaluateBezier(mid, 0, x1, x2, 1);
if (Math.abs(cx - x) < 0.0001) break;
cx < x ? (low = mid) : (high = mid);
}
return evaluateBezier((low + high) / 2, 0, y1, y2, 1);
}
function formatCubicBezier(x1, y1, x2, y2) {
const r = (n) => Math.round(n * 100) / 100;
return `cubic-bezier(${r(x1)}, ${r(y1)}, ${r(x2)}, ${r(y2)})`;
}
console.log(formatCubicBezier(0.25, 0.1, 0.25, 1));
// cubic-bezier(0.25, 0.1, 0.25, 1)
// Animate using the bezier curve
function animate(x1, y1, x2, y2, durationMs, onProgress) {
const start = performance.now();
function tick(now) {
const t = Math.min((now - start) / durationMs, 1);
onProgress(cubicBezierY(t, x1, y1, x2, y2));
if (t < 1) requestAnimationFrame(tick);
}
requestAnimationFrame(tick);
}