Principe

La Web Animations API (WAAPI) est une API JavaScript qui permet de générer des animations.

Fortement inspiré des règle CSS @keyframes.

1
<div></div>
1
const div = document.querySelector("div");
2
3
const keyframes = [
4
  {
5
    borderRadius: 0,
6
    backgroundColor: "red",
7
  },
8
  {
9
    borderRadius: "50%",
10
    transform: "translate(100px)",
11
  },
12
  {
13
    backgroundColor: "green",
14
    transform: "translate(200px)",
15
  },
16
];
17
18
const options = {
19
  duration: 4000,
20
  iterations: "Infinity",
21
  direction: "alternate",
22
};
23
24
const animation = div.animate(keyframes, options);





WAAPI - Principe
Définitionanimate(keyframes, options)
animate est une méthode du constructeur Element qui permet de lancer l'animation
Définitionkeyframes
keyframes est un tableau d'objets.
Chaque objet représente une étape dans l'évolution de l'élément HTML visé. Il est constitué de :
  • css : une suite de propriétés CSS avec leurs valeurs.
  • offset : la propriété offset permet de modifier l’état d'avancement de chaque étape dans l'animation. Ce nombre est compris entre 0 et 1. Elle est optionnelle.
1
const div = document.querySelector("div");
2
3
const keyframes = [
4
  {
5
    borderRadius: 0,
6
    backgroundColor: "red",
7
    offset: 0,  // 0%
8
  },
9
  {
10
    borderRadius: "50%",
11
    transform: "translate(100px)",
12
    offset: 0.8,  // 80%
13
  },
14
  {
15
    backgroundColor: "green",
16
    transform: "translate(200px)",
17
    offset: 1,  // 100%
18
  },
19
];
20
21
const options = {
22
  duration: 4000,
23
  iterations: "Infinity",
24
  direction: "alternate",
25
};
26
27
const animation = div.animate(keyframes, options);





WAAPI - Principe
Définitionoptions
options est un objet qui permet de gérer différentes propriétés de l'animation.
duration : durée en millisecondes
easing : fonction d'évolution de l'animation (linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(a,b,c,d)
delay : retard en millisecondes
iterations : nombre de fois (un nombre ou Infinity)
direction : sens de l'animation (normal, reverse, alternate, alternate-reverse)
fill : état à la fin de l'animation (backwards, forwards, both)