Editor de curvas cubic-bezier

Diseña el "ritmo" de tus transiciones y animaciones arrastrando dos puntos, compáralo con otras curvas en movimiento y copia el cubic-bezier() resultante.

¿Qué es una función de easing?

Cuando algo se mueve en la pantalla, la función de tiempo (easing o timing-function) decide cómo avanza: si arranca lento y acelera, si frena al llegar o si rebota. En la vida real nada se mueve a velocidad constante, por eso un buen easing hace que tu interfaz se sienta natural.

CSS trae palabras clave (ease, linear, ease-in, ease-out, ease-in-out), pero todas son casos de cubic-bezier(x1, y1, x2, y2): una curva definida por dos puntos de control.

• El eje horizontal es el tiempo (de 0 a 1) y el vertical el progreso de la animación.
• x1 y x2 deben estar entre 0 y 1.
• y1 y y2 pueden salirse de ese rango: valores mayores que 1 o menores que 0 hacen que la animación se pase del destino y regrese (efecto rebote o "back").

.boton {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.boton:hover {
  transform: scale(1.1);
}

Generador

Arrastra el punto rosa y el azul (o escribe los valores). Pulsa Reproducir para comparar tu curva con otra en movimiento.

Editor de curvas cubic-bezier

Curva cubic-bezier(0.34, 1.56, 0.64, 1)

x1y1x2y2

Arrastra los puntos rosa y azul. Valores de Y fuera de 0–1 crean efecto de rebote. Con el teclado: Tab + flechas (Shift = paso grande).

Comparación

Comparar con easelinearease-inease-outease-in-outeaseInQuarteaseOutQuinteaseInOutCubiceaseOutExpoeaseInBackeaseOutBackeaseInOutBackDuracións En bucle (ida y vuelta)

Tu curva

ease

Opacidad + escala

/* Tu curva de easing */
:root {
  --mi-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* En transiciones */
.elemento {
  transition: transform 1.2s var(--mi-easing);
}

.elemento:hover {
  transform: translateX(100px);
}

/* En animaciones */
.animado {
  animation: mover 1.2s var(--mi-easing) both;
}

Consejos de uso

• ease-out (frena al final) para lo que entra en pantalla: menús, modales, notificaciones. Se siente rápido y suave.
• ease-in (acelera al final) para lo que sale: el elemento "se va" con decisión.
• ease-in-out para lo que se mueve de un lugar a otro dentro de la pantalla.
• Las curvas con rebote (easeOutBack) dan personalidad a botones e iconos, pero úsalas con moderación: en todo el sitio cansan.
• linear sólo se ve bien en movimientos continuos: spinners de carga, rotaciones infinitas o marquesinas.
• Guarda tus curvas en variables (--ease-salida, --ease-rebote) para que todo el sitio se mueva con el mismo estilo.

Pruébala en una animación

Copia el valor y pégalo en el constructor de animaciones eligiendo cubic-bezier (personalizado).

Error común

Si escribes un valor de x fuera de 0–1 (por ejemplo cubic-bezier(1.2, 0, 0.5, 1)), la declaración es inválida y el navegador la ignora por completo, usando el easing por defecto.