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 predefinida | cubic-bezier(A, B, C, D)
animation-timing-function Ritmo de la animación función 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

Cubic Bezier

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:

Monkey Island - Guybrush Threepwood CSS animation

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

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev