Comment contrôler les animations CSS avec JavaScript

Lorsqu’il s’agit d’animation sur le Web, les développeurs doivent évaluer les exigences de l’animation en utilisant la bonne technologie – CSS ou JavaScript. De nombreuses animations peuvent être contrôlées avec CSS mais javascript fournira toujours plus de contrôle. Avec document.getAnimationsCependant, vous pouvez utiliser JavaScript pour gérer les animations CSS !

le document.getAnimations La méthode renvoie un tableau de CSSAnimation Des choses. CSSAnimation Fournit une gamme d’informations sur l’animation : playStateEt timelineEt effectet des événements tels que onfinish. Vous pouvez ensuite modifier ces objets pour ajuster l’animation :

// Make all CSS animations on the page twice as fast
document.getAnimations().forEach((animation) => {
  animation.playbackRate *= 2;
});

// Stop all CSS animations on the page
document.getAnimations().forEach((animation) => {
  animation.cancel();
});

Comment l’ajustement des animations CSS à la volée peut-il être bénéfique pour les développeurs ? Peut-être utiliser un fichier Batterie API Pour arrêter toutes les animations lorsque la batterie de l’appareil est faible. Arrêter éventuellement l’animation lorsque l’utilisateur ignore l’animation elle-même.

J’aime la façon dont vous pouvez utiliser JavaScript pour modifier les animations CSS. Les développeurs ont l’habitude de choisir entre CSS et JavaScript – et maintenant nous avons les outils pour les faire travailler ensemble !