Funciones de easing: ease, linear y cubic-bezier

Una función de easing controla la curva de velocidad de una transición o animación: la rapidez con la que acelera o desacelera durante su duración.

linear mantiene una velocidad constante durante toda la transición. Resulta útil para barras de carga e indicadores de progreso en los que se espera un movimiento uniforme.

ease comienza rápidamente y después se ralentiza cerca del final. Es la opción predeterminada y ofrece una sensación natural en la mayoría de las transiciones de interfaz.

ease-in comienza lentamente y acelera. Es adecuada para los elementos que salen de la pantalla (animaciones de salida).

ease-out comienza rápidamente y desacelera. Es ideal para los elementos que entran en la pantalla: llegan con energía y se asientan suavemente.

ease-in-out comienza y termina lentamente, con un movimiento más rápido en el centro. Es la mejor opción para animaciones en bucle o de ida y vuelta.

Define una curva cúbica de Bézier personalizada con cuatro puntos de control. Permite crear curvas de easing personalizadas y con efecto de resorte.

Los cuatro valores definen dos puntos de control: cubic-bezier(x1, y1, x2, y2). Los valores superiores a 1 en el eje y crean efectos de exceso (de tipo resorte). Use herramientas como easings.net para visualizar las curvas.

steps(n, direction) divide la animación en n pasos discretos de igual duración. Es perfecta para animaciones de sprites y efectos de máquina de escribir.

El segundo argumento controla dónde se produce el salto:

• jump-start: primer salto en el tiempo 0
• jump-end: último salto al final (predeterminado)
• jump-both: saltos tanto al principio como al final
• jump-none: ningún salto en ninguno de los extremos

La nueva función linear() permite definir curvas de easing arbitrarias mediante varios puntos, lo que permite crear efectos de resorte y rebote usando solo CSS, sin las limitaciones de cubic-bezier.

Las funciones de easing controlan las curvas de velocidad de las animaciones. Opciones integradas: linear, ease, ease-in, ease-out, ease-in-out. Las curvas personalizadas usan cubic-bezier(). Los pasos discretos usan steps(). La nueva función linear() permite crear curvas complejas con efecto de resorte.