Lorsqu’il s’agit d’animations sur le Web, les développeurs doivent mesurer les exigences de l’animation avec la bonne technologie – CSS ou JavaScript. De nombreuses animations sont gérables 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 méthode renvoie un tableau de CSSAnimation objets. CSSAnimation fournit une foule d’informations sur l’animation : playState, timeline, effectet des événements comme onfinish. Vous pouvez ensuite modifier ces objets pour ajuster les animations :
// 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();
});
En quoi l’ajustement des animations CSS à la volée pourrait-il être utile aux développeurs ? Peut-être utiliser l’API Battery pour arrêter toutes les animations lorsque la batterie de l’appareil est faible. Peut-être pour arrêter les animations lorsque l’utilisateur a fait défiler l’animation elle-même.
J’aime la façon dont vous pouvez utiliser JavaScript pour modifier les animations CSS. Auparavant, les développeurs devaient choisir entre CSS et JavaScript ; nous avons maintenant les outils pour les faire fonctionner ensemble !
je suis un imposteur
C’est la chose la plus difficile que j’aie jamais eue à écrire, et encore moins à m’avouer. J’ai écrit des lettres de démission pour des emplois que j’aimais, j’ai mis fin à des relations, j’ai échoué dans une foule de tâches et je me suis laissé tomber dans ma vie. Tous ces sentiments étaient très…
Animations CSS entre les requêtes multimédias
Les animations CSS sont là-haut avec du pain tranché. Les animations CSS sont efficaces car elles peuvent être accélérées par le matériel, elles ne nécessitent aucune surcharge JavaScript et elles sont composées de très peu de code CSS. Très souvent, nous ajoutons des transformations CSS aux éléments via CSS pendant…
Glisser vers le haut et vers le bas en CSS pur
Si je peux éviter d’utiliser JavaScript pour les animations d’éléments, je suis incroyablement heureux et motivé à le faire. Ils sont plus efficaces, ne nécessitent pas de framework JavaScript pour gérer les étapes et sont plus élégants. Un effet difficile à cerner avec du CSS pur est le glissement vers le haut…