💻 Funciones de tiempo Cambiando el ritmo con propiedades *-timing-function

Tanto cuando hablamos de transiciones como cuando hablamos de animaciones tenemos dos propiedades que se aplican exactamente igual y se encargan de definir el ritmo o transcurso de la animación o transición en cuestión.

Dichas propiedades son las siguientes:

Propiedades	Descripción	Valor
transition-timing-function	Ritmo de la transición	función suavizado predefinida | cubic-bezier(A, B, C, D)
animation-timing-function	Ritmo de la animación	función suavizado predefinida | cubic-bezier(A, B, C, D)

Cualquiera de estas dos propiedades permite indicar el ritmo de la transición/animación en cuestión.

Función predefinida

Quizás, la forma más sencilla de indicar el ritmo de una animación, sería especificar una de las siguientes palabras clave que existen. Cada una de ella, realiza la animación a un ritmo diferente:

Valor	Inicio	Transcurso	Final	Equivalente en cubic-beizer
ease	Lento	Rápido	Lento	cubic-bezier(0.25, 0.1, 0.25, 1)
linear	Normal	Normal	Normal	cubic-bezier(0, 0, 1, 1)
ease-in	Lento	Normal	Normal	cubic-bezier(0.42, 0, 1, 1)
ease-out	Normal	Normal	Lento	cubic-bezier(0, 0, 0.58, 1)
ease-in-out	Lento	Normal	Lento	cubic-bezier(0.42, 0, 0.58, 1)
cubic-bezier(A, B, C, D)	-	-	-	Transición personalizada

Si no se indica ninguna función de tiempo concreta, CSS utilizará la función de tiempo ease. Sin embargo, podemos utilizar cualquiera de las anteriores.

La función de tiempo linear quizás sea la más sencilla de entender, ya que siempre va al mismo ritmo, un ritmo constante. Por su parte, ease comienza suavemente, continua de forma más rápida y termina suavemente de nuevo. Las funciones de tiempo ease-in y ease-out son variaciones que van más lento al principio o al final, y la función de tiempo ease-in-out es una mezcla de las dos anteriores.

En el caso de que ninguna de ellas nos ofrezca el ritmo que buscamos, quizás nuestra mejor opción sea definirla manualmente mediante cubic-bezier().

Función Cubic Bezier

La función de tiempo cubic-bezier() es una función personalizada, donde podemos darle unos valores concretos depediendo de la velocidad que queramos que tenga la transición. En la última columna de la tabla anterior podemos ver los valores equivalentes a cada una de las palabras clave mencionadas como linear, ease, ease-in, ease-out o ease-in-out.

En principio, el formato de la función es cubic-bezier(A, B, C, D), donde esos cuatro parámetros son números que indican lo siguiente:

Parámetro	Valor	Descripción	Pertenece a
A	X1	Eje X del primer punto que orienta la curva bezier.	P1
B	Y1	Eje Y del primer punto que orienta la curva bezier.	P1
C	X2	Eje X del segundo punto que orienta la curva bezier.	P2
D	Y2	Eje Y del segundo punto que orienta la curva bezier.	P2

Todo esto se puede ver muy fácilmente utilizando la herramienta Cubic Bezier, donde puedes crear de forma interactiva el ritmo de las transiciones o animaciones, estableciendo visualmente los parámetros deseados.

Función de salto

Por último, a parte de las funciones de suavizado predefinidas y las cubic bezier, también es posible utilizar funciones de salto, que pueden ser muy útiles en ciertas ocasiones.

Las funciones de salto permiten establecer una transición o animación en un número concreto de pasos muy específico, que se pasa por parámetro n. Hay ciertas variaciones de funciones de salto, son las siguientes:

Valor	Descripción	Equivalente
steps(n, jump-start)	Divide el transcurso en n saltos y omite el primer paso.
steps(n, jump-end)	Divide el transcurso en n saltos y omite el último paso.
steps(n, jump-none)	Divide el transcurso en n saltos y no omite ningún paso.
steps(n, jump-both)	Divide el transcurso en n saltos y omite el primer y último paso.
steps(n)	Alias de jump-end	Equivale a steps(n, jump-end)
steps(n, start)	Alias de jump-start	Equivale a steps(n, jump-start)
steps(n, end)	Alias de jump-end	Equivale a steps(n, jump-end)
step-start	Función de salto predefinida	Equivale a steps(1, jump-start)
step-end	Función de salto predefinida	Equivale a steps(1, jump-end)

Estas funciones de salto pueden ser especialmente interesantes para hacer animaciones con spritesheets de imágenes, como por ejemplo, este de Guybrush Threepwood de Monkey Island. En ella, realizamos una animación que no nos interesa que sea animada, sino que se pueda saltar entre viñetas para replicar el efecto de una animación:

Tienes un artículo donde explico como funciona en Animar personajes con CSS.

Bibliografía:

https://lenguajecss.com/css/animaciones/timing-function/