Animation Timing Function
Por qué el movimiento lineal se siente falso
Cuando aprendes a manejar una bicicleta, no arrancas a velocidad máxima desde el primer pedaleo ni tampoco paras en seco. Aceleras gradualmente y desacelerás antes de detenerte. Ese es el movimiento natural que el cerebro humano espera. Cuando algo se mueve a velocidad constante en pantalla, algo en nosotros lo detecta como artificial, robótico.
La propiedad animation-timing-function resuelve exactamente eso. Define la curva de aceleración de la animación a lo largo de su duración: cuándo va rápido, cuándo desacelera, cuándo arranca despacio. Es lo que convierte un movimiento mecánico en uno que se siente vivo.
Las cinco curvas estándar de CSS
- ✦ linear: Velocidad perfectamente constante de principio a fin. Útil para rotaciones continuas, fondos en movimiento o cualquier cosa donde quieras que el usuario no perciba inicio ni final del ciclo.
- ✦ ease: (Valor por defecto) Arranca despacio, acelera en el centro y termina despacio. Produce transiciones bastante naturales para la mayoría de casos genéricos.
- ✦ ease-in: Comienza muy despacio y acelera progresivamente. Imita un objeto que toma impulso, como una pelota que empieza a rodar cústera abajo.
- ✦ ease-out: Empieza a velocidad máxima y desacelera suavemente. Perfecto para elementos que entran a la pantalla —se sienten responsivos e inmediatos.
- ✦ ease-in-out: Simétrico: inicio lento, centro rápido, final lento. Ideal para movimientos de vaivén o carruseles que van y vienen.
La regla que marca la diferencia en UI
Hay una decisión de diseño que los mejores equipos de producto aplican consistentemente:
- Cuando algo entra a pantalla (modal, menú, toast): usa
ease-out. La entrada rápida le da al usuario la sensación de que la UI responde instantáneamente a su acción. - Cuando algo sale de pantalla (cierre de modal, dismissal): usa
ease-in. El elemento parece tomar impulso al irse, desapareciendo sin entorpecer la navegación. - Para loops decorativos (fondos, orbs flotantes): usa
ease-in-outolinear.
Consejo profesional
¿Sabías que puedes crear tus propios easings personalizados? Con cubic-bezier(x1, y1, x2, y2) puedes definir curvas elásticas avanzadas que simulan rebotes o retrocesos elásticos.
Comparación visual de Timing Functions
<div class="easing-tester">
<div class="test-row">
<span class="label">linear (Velocidad constante)</span>
<div class="track"><div class="dot ease-linear"></div></div>
</div>
<div class="test-row">
<span class="label">ease (Suave inicio y fin - Por defecto)</span>
<div class="track"><div class="dot ease-default"></div></div>
</div>
<div class="test-row">
<span class="label">ease-in (Entrada lenta, salida rápida)</span>
<div class="track"><div class="dot ease-in-class"></div></div>
</div>
<div class="test-row">
<span class="label">ease-out (Entrada rápida, salida lenta)</span>
<div class="track"><div class="dot ease-out-class"></div></div>
</div>
<div class="test-row">
<span class="label">ease-in-out (Inicio lento, medio rápido, fin lento)</span>
<div class="track"><div class="dot ease-in-out-class"></div></div>
</div>
</div>Compara cómo se distribuye la velocidad del movimiento de izquierda a derecha en función del easing aplicado.
Errores comunes
Practica lo aprendido
Cambia el timing-function del código y experimenta con transiciones rápidas y lentas.