A la découverte d’animate.css

Aujourd’hui petite présentation d’animate.css, une feuille de style CSS permettant d’animer des éléments de notre DOM, à l’aide des animations CSS3.

Pour avoir un aperçu de ce que cela donne, rendez-vous sur le site officiel : animate.css

Au total on y retrouve plus de 70 animations différentes, il y a donc de quoi faire !

Techniquement il ne s’agit ni plus ni moins que d’une feuille de style CSS (avec des propriétés CSS3) à charger. Ensuite on appelle la classe « animated » sur un élément, puis la classe portant le nom de l’animation désirée.

Vous pouvez également jouer avec vos animations en personnalisant la « duration« , le « delay » et l' »iteration » le tout en CSS :

Pour jouer une animation lors d’un événement, il est tout à fait possible de la déclencher avec un peu de javascript. Il est également possible de détecter en javascript la « fin » d’une animation, très pratique donc pour supprimer notamment les classes que l’on vient d’ajouter pour permettre de ré-exécuter notre animation ensuite.

Ce fichier nous permettra de gagner du temps à réaliser des animations CSS3 basiques que l’on pourra appliquer par exemple sur des formulaires, des slideshows ou pour donner un effet lors de l’affichage d’un contenu au scroll etc. Attention toutefois de ne pas en abuser et d’utiliser les animations à bon escient …

Démo : animate.css
Code sources et exemples : https://github.com/daneden/animate.css

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.