Bibliothèques d'animation CSS

Vous cherchez à dynamiser l'affichage de votre site internet.
L'ajout d'animations peut-être une solution.
Je vous fais une liste de bibliothèques exclusivement en CSS qui pourront vous aider dans vos développements.

Je vous conseille de ne pas utiliser de bibliothèque trop volumineuse qui vont alourdir votre page ce qui a pour conséquence un temps de chargement trop important.
Utilisez également les animations avec parcimonie pour ne pas rendre votre site trop déroutant.

Vivify

Vivify propose pas moins de 68 animations différentes.
Son poids est de 58 ko.
Elle est très simple à utiliser puisqu'il vous suffit d'intégrer le fichier css dans le votre document et d'ajouter la class de l'animation à l'élément souhaité : division, image, texte...

<div class="vivify blink"></div>

http://vivify.mkcreative.cz/

Animate CSS

Cette bibliothèque très utilisée n'est plus à présenter.
Très complète, elle existe depuis 2013, et est régulièrement mise à jour.
La version actuelle est la 4.
Elle ajoute une grande diversité d'animations à vos projets : bounce, shake, fade, flip...

https://animate.style/

CSShake

Une bibliothèque amusante et insolite puisqu'elle s'est spécialisée dans les animations de secousse (d'où le nom 'shake').
Les effets se font au survol de l'élément.
L'outil est très flexible, car vous pouvez vous-même définir vos secousses (axe x/y, degré de rotation, opcité, délais...).
Le mieux est d'aller visionner des exemples.

https://elrumordelaluz.github.io/csshake/

AnimXYZ

AnimXYZ est une boite à outil d'animation CSS.
Entièrement paramétrable, elle permet de réaliser des animations plus complexes.
Son inconvénient, elle utilise un attribut qui n'existe pas en HTML : 'xyz', et vous devez utilisez javascript pour modifier la class de vos éléments de "xyz-in" à "xyz-out".
Pour paramétrer votre animation, vous intégrez vos options directement dans la balise 'xyz'.


<div xyz="fade up-100% flip-down flip-right-50% rotate-left-100% origin-bottom duration-10 stagger">
<div class="xyz-in"></div>
<div class="xyz-in"></div>
<div class="xyz-in"></div>
</div>

Je vous invite à tester des animations ici :
https://animxyz.com/#sandbox

Animate on Scroll : AOS

AOS est utilisé pour animer l'affichage de blocs, image, texte... au scroll de la page.
Il vous suffit d'attribuer le paramètre que vous souhaitez dans la class de l'élément.


<div data-aos="fade-up"></div>

https://michalsnik.github.io/aos/?ref=blogduwebdes...

Magic Animations CSS3

Un bibliothèque d'animations intéressantes avec des effets de fondu, de rotation ou encore de mouvement.
Elle est plus très légère, ce qui la rend encore plus attrayantes.

https://www.minimamente.com/project/magic/

Hover

Hover.css apporte de nombreux effets au survol de l'élément: rotation, changement de couleur de fond ou de bordure avec transition, animation d'une icône.
Cette bibliothèque est plus adaptée à des boutons, des liens, des logos ou encore des images.

http://ianlunn.github.io/Hover/

Un dernier conseil, avant de vous lancer : pour toutes ces intégrations, si vous le pouvez, tentez d'extraire seulement les animations que vous souhaitez utiliser dans votre propre css afin de réduire la taille du CSS et ainsi optimiser votre site internet.

N'hésitez pas à partager vos créations en commentaire, et bonne animation à tous !

Astuce : Grid CSS responsive sans Media Queries 8 sites d'images libres de droits et gratuites pour vos créations

Bibliothèques d'animation CSS