La función steps()

Hasta ahora hemos visto las palabras claves predefinidas como linear, ease, ease-in, ease-out o ease-in-out, además de la función cubic-bezier() y la función linear(). En este artículo vamos a repasar la función steps(), que nos permite realizar ritmos o aceleraciones escalonadas con las denominadas funciones de salto.

La función steps()

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. Este tipo de función es muy útil para crear animaciones donde queremos que se produzca un ritmo constante durante una cierta cantidad de tiempo.

Esto es muy habitual en animaciones de spritesheets, como las que se realizan en videojuegos y que veremos más adelante en un ejemplo.

¿Qué significa steps()?

La función steps() nos permite dividir el ritmo o aceleración en el número de fragmentos (de igual tamaño) pasado por parámetro. Por ejemplo, si indicamos la función steps(6), estaremos indicando que se divida el tiempo total en 6 fragmentos de mismo tamaño de duración, de modo que quedaría una gráfica con forma de escalones o escalera:

O lo que es lo mismo, el ritmo de la animación será constante y se irá incrementando cada cierto tiempo, donde dicho fragmento de tiempo es idéntico para cada uno de los 6 pasos.

Ejemplo en acción de steps()

En este ejemplo, estamos indicando que la animación debe tener exactamente 6 pasos, por lo que en lugar de ser una transición o animación fluida, será una escalonada en el número de pasos dados. Observa los siguientes detalles:

• El tamaño del contenedor gris es de 600px.
• El tamaño del cuadrado es de 100x100 píxels.
• Si dividimos el contenedor en 6 pasos, se moverá 100px en cada fragmento, justo lo que ocupa.

.container {
  width: 600px;
  background: grey;
}

.element {
  width: 100px;
  height: 100px;
  background: indigo;
  animation: move 5s infinite;
}

.linear { animation-timing-function: linear; }
.steps { animation-timing-function: steps(6); }

@keyframes move {
  to { transform: translateX(600px); }
}

<div class="container">
  <div class="element linear"></div>
  <div class="element steps"></div>
</div>

Observa que ese último paso que realiza el cuadrado con el ritmo linear puede sobrar o faltar, dependiendo del caso. En el siguiente apartado, hablamos justo de una forma de puntualizar esos detalles.

Variaciones de la función steps()

Hay ciertas variaciones de las funciones escalonadas de salto, utilizando ciertas palabras clave o valores especiales. Son las siguientes, mostradas en esta tabla:

Cada uno de estos valores puede ser interesante en diferentes situaciones. Para entenderlos bien, observa el siguiente ejemplo, donde mostramos la misma animación anterior, utilizando las diferentes variaciones anteriores:

.container {
  width: 600px;
  background: grey;
}

.element {
  width: 100px;
  height: 50px;
  color: white;
  font-size: 0.9rem;
  display: grid;
  place-items: center;
  background: indigo;
  animation: move 5s infinite;
}

.jump-start { animation-timing-function: steps(6, jump-start); }
.jump-end { animation-timing-function: steps(6, jump-end); }
.jump-none { animation-timing-function: steps(6, jump-none); }
.jump-both { animation-timing-function: steps(6, jump-both); }
.step-start { animation-timing-function: step-start; }
.step-end { animation-timing-function: step-end; }

@keyframes move {
  to { transform: translateX(600px); }
}

<div class="container">
  <div class="element jump-start">jump-start</div>
  <div class="element jump-end">jump-end</div>
  <div class="element jump-none">jump-none</div>
  <div class="element jump-both">jump-both</div>
  <div class="element step-start">step-start</div>
  <div class="element step-end">step-end</div>
</div>

Las funciones escalonadas steps() son muy útiles para crear animaciones basadas en spritesheets.