Funciones de tiempo en CSS - auladigital2.com

Controlando el ritmo de las animaciones con funciones de tiempo en CSS

Hasta este punto, hemos aprendido cómo crear transiciones y animaciones en CSS. Sin embargo, aún no hemos explorado cómo controlar la velocidad o el ritmo con el que ocurren esos cambios visuales. Para ello, existen las llamadas funciones de tiempo, que permiten modificar cómo se comporta una animación a lo largo de su duración.

¿Qué son las funciones de tiempo en CSS?

Las funciones de tiempo definen la aceleración de una transición o animación. En otras palabras, determinan si el cambio será constante, acelerado al principio, más lento al final, o cualquier combinación de estas variaciones.

En CSS, hay dos propiedades principales que nos permiten definir este ritmo:

transition-timing-function: para controlar transiciones.
animation-timing-function: para controlar animaciones.

Ambas aceptan los mismos tipos de valores.

Tipos de funciones de tiempo

Podemos elegir entre distintos métodos para definir el ritmo de un efecto animado:

Tipo de valor	Descripción
Palabras clave	Valores predefinidos como `ease` o `linear`.
`cubic-bezier()`	Personaliza el ritmo mediante una curva Bézier.
`steps()`	Divide la animación en pasos fijos.
`linear()`	Define una progresión constante personalizada.

En este artículo nos centraremos en las palabras clave, ya que son las más utilizadas y fáciles de aplicar.

Palabras clave predefinidas

Estas son las funciones de tiempo estándar que puedes usar directamente:

Valor	Descripción
`linear`	Ritmo uniforme, sin aceleraciones.
`ease`	Comienza rápido y termina lento. Valor por defecto.
`ease-in`	Inicia despacio y acelera hacia el final.
`ease-out`	Inicia rápido y se ralentiza al final.
`ease-in-out`	Combina un inicio lento y un final lento.

Ejemplo práctico

Supongamos una animación que mueve un elemento hacia la derecha. Cambiando el valor de animation-timing-function, podemos observar cómo varía su comportamiento:

cssCopiarEditar.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; }
}

.linear       { animation-timing-function: linear; }
.ease         { animation-timing-function: ease; }
.ease-in      { animation-timing-function: ease-in; }
.ease-out     { animation-timing-function: ease-out; }
.ease-in-out  { animation-timing-function: ease-in-out; }

¿Qué ritmo elegir?

Usa linear si necesitas una progresión constante, como en un cargador.
ease es ideal para efectos generales que se sientan suaves.
ease-in funciona bien para entradas progresivas, como elementos que aparecen.
ease-out es útil para salidas suaves o retrocesos.
ease-in-out es recomendable para transiciones que entran y salen con naturalidad.

¿Y si quiero más control?

Cuando los valores predefinidos no son suficientes, CSS permite definir funciones más personalizadas con cubic-bezier(), steps() o linear() con parámetros. Estas funciones avanzadas permiten crear movimientos a medida, algo que exploraremos en el siguiente tema.