Opciones de las animaciones

Configurar una animación WebAnimation


En los artículos anteriores habrás comprobado que como segundo parámetro del método animate() establecíamos la duración de la animación. Sin embargo, en lugar de ese , podemos pasarle un objeto de opciones, donde configuramos como queremos que se comporte.

Opciones de WebAnimation

Entre otras, hay muchas de las propiedades que tienen las animaciones CSS como animation-delay o animation-duration, por ejemplo.

En nuestro caso, el objeto de opciones se podrían definir las siguientes propiedades:

PropiedadesDescripciónEquivalencia CSSDefault
delayTiempo (retardo) en ms para que empiece la animación.animation-delay0
endDelayTiempo (retardo) en ms para finalizar la animación.0
durationDuración en ms de la animación (por cada iteración).animation-durationauto
directionDirección de la animación por sus keyframes.animation-directionnormal
easingFunción de tiempo (ritmo) de la animación.animation-timing-functionlinear
fillComportamiento de la animación al terminar.animation-fill-modeauto
iterationStartPunto de la iteración en la que empieza la animación.0.0
iterationsNúmero de veces que se repite la animación.animation-iteration-count1.0
iterationCompositeOperación de composición entre cada intervalo.replace
compositeOperación de composición entre una y otra animación.animation-compositionreplace
pseudoElementSi se indica ::before o ::after, se aplica la animación al pseudoelemento.

Por si no los conoces, algunas propiedades anteriores pueden tomar varios valores posibles. Aquí puedes ver una lista de opciones posibles:

PropiedadValores
directionnormal, reverse, alternate, alternate-reverse.
easinglinear, ease-in, ease-out, ease-in-out, cubic-bezier(...).
fillnone, forwards, backwards, both, auto.
compositeadd, accumulate, replace.
iterationCompositeaccumulate, replace.

Veamos ahora, un ejemplo utilizando el objeto de opciones en lugar del parámetro de duración directamente. Simplemente añadimos como segundo parámetro de animate() el objeto de opciones:

const element = document.querySelector(".element");

const keyframes = [
  { transform: "translate(0, 0)", offset: 0 },
  { transform: "translate(200px, 0)", offset: 0.40 },
  { transform: "translate(200px, 200px)", offset: 0.60 },
  { transform: "translate(0, 200px)", offset: 0.80 }
];

const options = {
  duration: 4000,
  direction: "alternate",
  fill: "forwards",
  iterations: Infinity
};

const animation = element.animate(keyframes, options);
body { height: 250px; }

.element {
  width: 50px;
  height: 50px;
  background: indigo;
}
<div class="element"></div>

En este caso hemos creado un objeto de opciones con las siguientes propiedades:

  • duration: Establece la duración de la animación en milisegundos.
  • direction a alternate: Al acabar la animación, vuelve a realizarla en sentido contrario y así continuamente.
  • fill a forwards: Establece que al completarse, mantenga los valores finales de la animación.
  • iterations: Establece que se repita de forma infinita.

¿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