Les animations CSS offrent trois avantages majeurs par rapport aux techniques d’animation traditionnelles basées sur des scripts :
- Elles sont simples à utiliser pour des animations simples ; il n’est même pas nécessaire de connaître JavaScript pour les réaliser.
- Même avec une charge système modérée, les animations fonctionnent bien. En JavaScript, les animations simples fonctionnent souvent mal. Pour rendre les performances aussi fluides que possible, le moteur de rendu peut utiliser le saut de trame et d’autres approches.
- Le fait de permettre au navigateur de réguler la séquence d’animation lui permet d’améliorer les performances et l’efficacité en limitant la fréquence de mise à jour des animations dans les onglets qui ne sont pas actuellement visibles, par exemple.
Bien que la plupart des animations puissent être réalisées avec du CSS pur, vous pouvez utiliser des bibliothèques et des cadres d’animation pour créer de meilleures animations en moins de temps.
1️⃣ Animate.css – Animations CSS de Daniel Eden
2️⃣ Anime.js – Anime.js est une bibliothèque d’animation JavaScript légère, dotée d’une API simple mais puissante. Elle fonctionne avec les propriétés CSS, SVG, les attributs DOM et les objets JavaScript.
3️⃣ CSShake – CSShake fournit exactement ce qu’il dit sur la boîte – une bibliothèque CSS conçue spécifiquement pour secouer les éléments de votre page Web.
4️⃣ Hover.css – Hover.css est une bibliothèque d’animation CSS conçue pour être utilisée avec les boutons et autres éléments d’interface utilisateur de votre site Web.
5️⃣ AniJS – AniJS est une bibliothèque d’animations qui vous permet d’ajouter des animations à des éléments dans une structure simple de type phrase.
6️⃣ Animista – Animations CSS sur demande
7️⃣ Tachyons-animés – Tachyons est une bibliothèque CSS atomique contenant une tonne de classes utilitaires permettant de concevoir n’importe quoi en ajoutant des classes à ce dont vous avez besoin.
8️⃣ Sequence.js – Sequence.js est une bibliothèque JavaScript qui fournit un cadre CSS réactif pour créer des curseurs, des présentations, des bannières et d’autres applications uniques basées sur des étapes.
9️⃣ Infinite – Ces animations, comme les rotations et les impulsions, sont spécialement conçues pour fonctionner et se répéter à l’infini.
🔟 OBNOXIOUS.CSS – Animations pour les forts de cœur et les faibles d’esprit
1️⃣1️⃣ MOTION UI – Une bibliothèque Sass pour créer des transitions et des animations CSS flexibles.
1️⃣2️⃣ Keyframes.app – Une interface utilisateur graphique pour générer des animations CSS personnalisées par images clés.
1️⃣3️⃣ AnimXYZ – AnimXYZ vous aide à créer, personnaliser et composer des animations pour votre site web. Conçu pour Vue, React, SCSS et CSS.
1️⃣4️⃣ Tourbillon – Des animations de chargement en CSS avec un minimum d’effort !
1️⃣5️⃣ Hamburgers – Hamburgers est une collection de savoureuses icônes de hamburgers animées en CSS. La source est également incluse sous forme de bibliothèque Sass. C’est modulaire et personnalisable, alors préparez votre propre hamburger.
