¿Qué son las funciones de tiempo?

Cambiando el ritmo con las timing functions


Hasta ahora hemos visto como crear transiciones y animaciones, pero no hemos modificado el ritmo o la aceleración de la misma. En este artículo vamos a ver las funciones de tiempo, que son un mecanismo que sirve para cambiar o variar ese ritmo de la animación.

Las funciones de tiempo en CSS

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: transition-timing-function que aplica a transiciones, y animation-timing-function que aplica a animaciones.

Cada una de estas propiedades permite indicar el ritmo de la transición/animación, utilizando diferentes valores:

Tipo de valor Descripción Más info
Palabra clave predefinida (linear, ease, etc...) Establece un ritmo predefinido en CSS. (Este artículo)
Función de tiempo cubic-bezier() Establece un ritmo personalizado. Ver cubic-bezier()
Función de tiempo linear() Establece un ritmo lineal personalizado. Ver linear()
Función de tiempo steps() Establece un ritmo escalonado personalizado. Ver steps()

En cualquiera de las mencionadas dos propiedades se puede indicar el ritmo de la transición/animación en cuestión, utilizando uno de estos 4 tipos de valores.

Valores predefinidos

Quizás, la forma más sencilla de indicar el ritmo de una animación, sería especificar una de las siguientes palabras clave predefinidas (valores) que existen para indicar en las propiedades anteriores:

Palabra clave predefinidad Significado
linear Ritmo constante, siempre al mismo ritmo.
ease Ritmo muy rápido al principio, ralentizado al final. Por defecto.
ease-in Ritmo lento al principio, rápido al final.
ease-out Ritmo rápido al principio, lento al final.
ease-in-out Ritmo rápido, lento en los extremos (combinación de los dos anteriores).

Cada una de estas palabras clave establecerá el ritmo de la animación o transición en cuestión. Observa los siguientes ejemplos, donde modificamos el ritmo de la animación de un rectángulo creciendo en ancho:

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

  • La función de tiempo linear es la más sencilla de entender: va siempre al mismo ritmo: constante.
  • La función de tiempo ease, comienza rápidamente y se va ralentizando.
  • Las funciones de tiempo ease-in y ease-out son variaciones que van más lento al principio o al final.
  • La función de tiempo ease-in-out es una mezcla de las dos anteriores.

Veamos un ejemplo más en acción, utilizando el desplazamiento con la propiedad translate:

.element {
  --size: 100px;

  width: var(--size);
  height: var(--size);
  color: white;
  font-size: 0.9rem;
  border-radius: 50%;
  margin: 5px;
  display: grid;
  place-items: center;
  background: indigo;

  animation: move 5s alternate infinite;
}

@keyframes move {
  to { translate: 600px; }
}

.ease { animation-timing-function: ease; }
.linear { animation-timing-function: linear; }
.ease-in { animation-timing-function: ease-in; }
.ease-out { animation-timing-function: ease-out; }
.ease-in-out { animation-timing-function: ease-in-out; }
<div class="element ease">ease</div>
<div class="element linear">linear</div>
<div class="element ease-in">ease-in</div>
<div class="element ease-out">ease-out</div>
<div class="element ease-in-out">ease-in-out</div>

En el caso de que ninguna de estas palabras claves predefinidas nos ofrezca el ritmo que buscamos, tendríamos que optar por alguna de las funciones de tiempo personalizadas que veremos a continuación.

¿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