Bibliothèques d'animation CSS
- Webdesign
- 12544 vues
- Yoan LE DIZES Expert SEO technique & sémantique
Les points clés, Yoma-Web :
- Choisir des bibliothèques légères : privilégiez des librairies CSS de taille modeste pour ne pas alourdir votre page (ex. Vivify : ~58 ko) et appliquez uniquement les animations utiles
- Vivify : animations simples et variées, propose 68 effets prêts à l’emploi via une simple classe CSS comme blink.
- Animate.css : incontournable et riche, très populaire depuis 2013, cette librairie propose une vaste panoplie d’animations (bounce, fade, flip…) et est régulièrement mise à jour
- Spécialisées et créatives : CSShake, Hover, Magic
- CSShake : effets de secousse personnalisables, actifs au survol
- Hover.css : animations ciblées (icônes, boutons) au survol
- Magic Animations CSS3 : effets sophistiqués de fondu, rotation, mouvements
- AnimXYZ : boîte à outils animée : permet des animations complexes via attribut xyz et nécessite un peu de JavaScript pour gérer les classes xyz-in/out.
- AOS : animations au scroll, anime les éléments lorsq
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 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...
http://vivify.mkcreative.cz/
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/
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/
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/
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/
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 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'.
Je vous invite à tester des animations ici :
https://animxyz.com/#sandbox
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
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.
https://michalsnik.github.io/aos/?ref=blogduwebdes...
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...
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/
Elle est plus très légère, ce qui la rend encore plus attrayantes.
https://www.minimamente.com/project/magic/
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/
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 !
N'hésitez pas à partager vos créations en commentaire, et bonne animation à tous !
Vous avez un projet Web ?
Profitez de l'expérience d'un expert du
WEB
Je vous accompagne de la création à la stratégie de positionnement de votre site web.
