Animate.css
Si vous ne connaissez pas encore cette librairie CSS3 vous aller adorer. Animate.css vous permet d’animer vos pages web en appliquant seulement 2 classes sur vos éléments. Après avoir importé le fichier animate.css il vous suffit d’appliquer la classe animated suivie de l’animation que vous voulez appliquer.
<html> <head> <link rel="stylesheet" href="animate.css"> </head> <body> <h1>Animate.css</h1> <div class="animated bounce">bounce</div> <div class="animated swing">swing</div> <div class="animated hinge">hinge</div> </body> </html>
Vous pouvez également ajouter les classes avec jQuery et récupérer l’événement de fin d’animation :
$('h1').removeClass().addClass('animated shake').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
// Lorsque l'animation est finie on supprime toutes les classes appliquées à notre élément
$(this).removeClass();
});
Sources et démo
Vous trouverez les sources directement sur GitHub : https://github.com/daneden/animate.css et la démo avec tous les effets disponible est accessible ici : http://daneden.github.io/animate.css/.
Laisser un commentaire