Animation

Le prototype du constructeur Animation est le parent des animations. Il contient différentes méthodes qui permettent d'agir sur nos animations.

DéfinitionMéthodes

play() : lance une animation

pause() :interrompt une animation

reverse() : lit une animation à l'envers

cancel() : annule une animation

playbackRate() : change la vitesse de l'animation

finish() : finit l'animation

DéfinitionExemple

Stopper une animation

1
const div = document.querySelector("div");
2
const pause = document.querySelector("button:nth-of-type(1)");
3
const play = document.querySelector("button:nth-of-type(2)");
4
5
const keyframes = [
6
  {
7
    borderRadius: 0,
8
    backgroundColor: "red",
9
    offset: 0,  // 100%
10
  },
11
  {
12
    borderRadius: "50%",
13
    transform: "translate(100px)",
14
    offset: 0.8,  // 80%
15
  },
16
  {
17
    backgroundColor: "green",
18
    transform: "translate(200px)",
19
    offset: 1,  // 100%
20
  },
21
];
22
23
const options = {
24
  duration: 4000,
25
  iterations: "Infinity",
26
  direction: "alternate",
27
};
28
29
const animation = div.animate(keyframes, options);
30
pause.addEventListener('click', ()=>animation.pause());
31
play.addEventListener('click', ()=>animation.play());







WAAPI - Principe