Menús que se despliegan, modales que aparecen, botones que reaccionan. La transición CSS transition: transform 0.3s ease-out es exactamente una función de easing. El easeOut es el más usado porque imita cómo se detiene algo real.
💡 Para microinteracciones de 150–300 ms casi cualquier ease out queda bien; lo importante es que no sea linear.
Un objeto que aparece con un pequeño rebote (back/elastic), una moneda recogida que da un salto, un menú que entra con carácter. Ese pulido que hace que un juego «se sienta bien» se construye en gran parte con easing.
💡 Combinar escala + posición con easings distintas multiplica la sensación de vida.
Una cámara que se acerca a un objetivo o sigue al personaje no debe arrancar ni frenar de golpe. Una easing in-out suaviza el inicio y el final del movimiento y evita el mareo del corte brusco.
💡 Para recorridos por una trayectoria curva, el easing controla el ritmo y la Bézier, la forma del camino.
En After Effects, Figma o Lottie las propiedades animadas (posición, opacidad, escala) llevan curvas de easing en sus fotogramas clave. El editor de curvas es, de hecho, un editor de Bézier cúbica.
💡 La regla «ease todo» de los animadores: casi nada se mueve a velocidad constante en la naturaleza.
¿Cómo aplico una función de easing a una animación?
Calculas el progreso lineal t dividiendo el tiempo transcurrido entre la duración total, lo pasas por la easing y lo usas para interpolar: valor = inicio + (fin − inicio) × easing(t). Así, en lugar de mover el valor a ritmo constante, sigues la curva: arranca o frena según la función elegida.
💡 La misma fórmula sirve para posición, escala, opacidad o color (interpolando cada canal).
¿Por qué casi nunca conviene usar «linear»?
Una animación lineal mantiene la misma velocidad de principio a fin, algo que en el mundo real casi no ocurre: las cosas aceleran y frenan. Por eso el movimiento lineal se percibe robótico. Se reserva para casos donde la constancia es deseable: barras de progreso, rotaciones continuas o cintas.
💡 Compara en la gráfica cualquier curva con la diagonal: cuanto más se aleja de la recta, más cambia el ritmo.
¿Qué relación hay con cubic-bezier() de CSS?
La función cubic-bezier(x1, y1, x2, y2) de CSS define una curva de easing con una Bézier cúbica donde los ejes son tiempo y progreso. Las funciones de Penner (quad, cubic, sine…) son fórmulas equivalentes a esas curvas. Las palabras clave ease, ease-in o ease-out de CSS son, por dentro, cubic-bezier concretas.
💡 back y elastic no se pueden expresar con un solo cubic-bezier porque se salen del rango; en CSS se logran con keyframes o con la nueva función linear().
¿Cuándo uso easeIn, easeOut o easeInOut?
easeOut para que algo aparezca o se detenga (lo más habitual en interfaces). easeIn para que algo desaparezca o salga de pantalla. easeInOut para mover un elemento de un punto a otro, porque suaviza tanto el arranque como el frenado.
💡 Regla rápida: lo que entra, easeOut; lo que sale, easeIn; lo que va de A a B, easeInOut.
¿Qué es el overshoot y por qué back y elastic se salen de 0–1?
El overshoot es cuando el valor se pasa del destino y vuelve, como un muelle. Las familias back y elastic lo hacen a propósito (y back también retrocede al inicio: anticipación) para dar sensación de energía. Por eso devuelven valores menores que 0 o mayores que 1 en parte del recorrido.
💡 No las apliques a propiedades que no admiten salirse de su rango, como una opacidad (0–1) o un tamaño que no puede ser negativo.
¿Estas funciones sirven en cualquier lenguaje o motor?
Sí. Son fórmulas matemáticas puras que reciben t y devuelven un valor, así que se implementan igual en JavaScript, C#, C++, Python o GDScript. Motores como Unity, Godot o Unreal traen sus propios editores de curvas, pero entender las funciones por dentro te permite replicarlas y combinarlas a mano.
💡 El catálogo «estándar» (easeInQuad, easeOutCubic…) viene de las ecuaciones que popularizó Robert Penner y se reutiliza en casi todas las librerías de animación.
✅easeOut por defectoPara casi todo lo que aparece o se detiene, un easeOut (quad o cubic) es la opción segura y natural. Empieza por ahí antes de buscar curvas más exóticas.
✅Reserva back y elasticSon sabrosas pero cansan si se abusa. Úsalas como acento puntual (una confirmación, un icono destacado), no en cada transición.
✅Ajusta duración a la distanciaUn recorrido corto necesita menos tiempo que uno largo. Duraciones de 150–400 ms funcionan para microinteracciones; reserva más tiempo para movimientos grandes.
✅Respeta prefers-reduced-motionHay personas a las que el movimiento les molesta. Detecta esa preferencia del sistema y reduce o desactiva las animaciones cuando esté activa.
✅Cuida la propiedad animadaAnimar transform y opacity es barato; animar width, top o left fuerza recálculos de maquetación. Prefiere transform para que vaya fluido.
✅Combina varias easingsAplicar curvas distintas a posición, escala y opacidad a la vez crea movimientos mucho más ricos que usar la misma para todo.