Principe

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

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 qui contiennent des propriétés CSS avec leur valeur.
Chaque objet représente une étape dans l'évolution de l'élément HTML visé.
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.
1
const div = document.querySelector("div");
2
3
const keyframes = [
4
  {
5
    borderRadius: 0,
6
    backgroundColor: "red",
7
    offset: 0,  // 100%
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 permettant de gérer différentes propriétés de l'animation.
duration : durée en millisecondes
easing : function 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)