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 GitHubhttps://github.com/daneden/animate.css et la démo avec tous les effets disponible est accessible ici : http://daneden.github.io/animate.css/.

Partager cet article

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *