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
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:
| Propiedades | Descripción | Equivalencia CSS | Default |
|---|---|---|---|
delay | Tiempo (retardo) en ms para que empiece la animación. | animation-delay | 0 |
endDelay | Tiempo (retardo) en ms para finalizar la animación. | — | 0 |
duration | Duración en ms de la animación (por cada iteración). | animation-duration | auto |
direction | Dirección de la animación por sus keyframes. | animation-direction | normal |
easing | Función de tiempo (ritmo) de la animación. | animation-timing-function | linear |
fill | Comportamiento de la animación al terminar. | animation-fill-mode | auto |
iterationStart | Punto de la iteración en la que empieza la animación. | — | 0.0 |
iterations | Número de veces que se repite la animación. | animation-iteration-count | 1.0 |
iterationComposite | Operación de composición entre cada intervalo. | — | replace |
composite | Operación de composición entre una y otra animación. | animation-composition | replace |
pseudoElement | Si 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:
| Propiedad | Valores |
|---|---|
direction | normal, reverse, alternate, alternate-reverse. |
easing | linear, ease-in, ease-out, ease-in-out, cubic-bezier(...). |
fill | none, forwards, backwards, both, auto. |
composite | add, accumulate, replace. |
iterationComposite | accumulate, 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.directionaalternate: Al acabar la animación, vuelve a realizarla en sentido contrario y así continuamente.fillaforwards: Establece que al completarse, mantenga los valores finales de la animación.iterations: Establece que se repita de forma infinita.
