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.
<h1 class="animated bounce">Example</h1>Vous pouvez également jouer avec vos animations en personnalisant la “duration”, le “delay” et l’“iteration” le tout en CSS :
#yourElement {
-vendor-animation-duration: 3s;
-vendor-animation-delay: 2s;
-vendor-animation-iteration-count: infinite;
}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 …
Originally published at Sois-net.