Question 1

¿Qué es una función de easing?

Accepted Answer

Una función de easing transforma el progreso lineal de una animación (un valor t que va de 0 a 1 con el tiempo) en otro valor que cambia de ritmo: empieza lento, acelera, frena al final o incluso se pasa de largo y vuelve. Sirve para que un movimiento parezca natural en lugar de mecánico. La aplicas interpolando: valor = inicio + (fin − inicio) × easing(t). Funciones como easeInQuad, easeOutCubic o easeOutBounce son las más habituales en interfaces, videojuegos y motion graphics.

Question 2

¿Qué diferencia hay entre ease in, ease out y ease in out?

Accepted Answer

Ease in arranca despacio y acelera al final: útil para elementos que salen de la pantalla. Ease out empieza rápido y frena suavemente al llegar: es el más usado para elementos que aparecen o se detienen en su sitio, porque imita cómo se frena algo real. Ease in out combina ambos: arranque suave, parte central rápida y frenado al final, ideal para transiciones largas entre dos estados. En este visualizador puedes alternar entre las tres variantes de cada familia y ver la curva.

Question 3

¿Qué relación tienen las funciones de easing con las curvas de Bézier?

Accepted Answer

En CSS y en muchos motores el easing se define con una curva de Bézier cúbica mediante cubic-bezier(x1, y1, x2, y2), donde los ejes son tiempo (horizontal) y progreso (vertical). Las funciones clásicas de Robert Penner (quad, cubic, sine…) son fórmulas matemáticas equivalentes a esas curvas. La ventaja de la Bézier es que puedes arrastrar dos manejadores para diseñar tu propia curva; la ventaja de las funciones es que son exactas y fáciles de portar a cualquier lenguaje.

Question 4

¿Por qué algunas curvas de easing se salen del rango 0 a 1?

Accepted Answer

Las familias back y elastic devuelven a propósito valores por debajo de 0 o por encima de 1 en parte del recorrido. Eso produce el efecto de anticipación (la caja retrocede un poco antes de avanzar) o de rebote/overshoot (se pasa del destino y vuelve), que da sensación de vida o "juice". Bounce, en cambio, simula varios botes pero se mantiene dentro de 0 a 1. Por eso no debes usar back o elastic sobre propiedades que no admiten salirse de su rango, como una opacidad o un tamaño que no puede ser negativo.

Question 5

¿Cómo elijo la función de easing adecuada para una animación?

Accepted Answer

Como regla general: ease out para que algo aparezca o se detenga (lo más común en interfaces), ease in para que algo desaparezca, y ease in out para mover algo de un punto a otro. Reserva back y elastic para acentos puntuales (un botón que confirma, un icono que aparece) porque cansan si se abusa, y bounce para efectos lúdicos. Cuanto más larga la animación, más conviene una curva suave; para microinteracciones de 150-300 ms casi cualquier ease out funciona bien.

Visualizador de Funciones de Easing

1. Elige la función de easing

2. Curva y animación

📚Guía de Funciones de Easing

🔗Apps relacionadas