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 créer un objet Animation et de le lancer.
Définitionkeyframes
keyframes peut être 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. Sans offset, chaque objet se partage le temps d'animation.
1
const keyframes = [
2
  {
3
    borderRadius: 0,
4
    backgroundColor: "red",
5
    offset: 0,  // 0%
6
  },
7
  {
8
    borderRadius: "50%",
9
    transform: "translate(100px)",
10
    offset: 0.8,  // 80%
11
  },
12
  {
13
    borderRadius: 0,
14
    backgroundColor: "green",
15
    transform: "translate(200px)",
16
    offset: 1,  // 100%
17
  },
18
];
keyframes peut être un objet.
Chaque propriété de l'objet est une propriété css ou offset dont la valeur est un tableau des différents temps de l'évolution de l'animation.
1
const keyframes = {
2
  borderRadius: [0, "50%", 0],
3
  backgroundColor: ["red", "red", "green"],
4
  transform: [, "translate(100px)", "translate(200px)"],
5
  offset: [0, 0.8, 1]
6
};
Définitionoptions
options est un objet qui permet de gérer différentes propriétés de l'animation :
delay : retard en millisecondes
direction : sens de l'animation (normal, reverse, alternate, alternate-reverse)
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)
fill : état à la fin de l'animation (backwards, forwards, both, none)
iterations : nombre de fois (un nombre ou Infinity)
1
const options = {
2
  duration: 4000,
3
  iterations: "Infinity",
4
  direction: "alternate",
5
};
ExempleExemple
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