- Téléchargez animate.css depuis le site Web du projet (https://animate.style/) ou installez-le via npm en utilisant la commande
npm install animate.css. - Incluez animate.css dans votre projet en ajoutant une ligne de code
<link rel="stylesheet" href="path/to/animate.min.css"> dans le <head> de votre document HTML. - Ajoutez la classe animate.css à l’élément HTML que vous souhaitez animer. Vous pouvez trouver une liste complète des classes d’animation disponibles sur le site Web du projet. Par exemple, pour animer un élément avec une animation de fondu, ajoutez la classe
animated et la classe fadeIn :
<div class="animated fadeIn">Contenu à animer</div>
- Si vous souhaitez contrôler la durée de l’animation, ajoutez également la classe de durée (par exemple,
faster, slower, 2s, etc.). Par exemple :
<div class="animated fadeIn slower">Contenu à animer</div>
- Vous pouvez également contrôler la boucle et l’infini de l’animation en utilisant les classes
infinite et pingpong :
<div class="animated fadeIn slower infinite">Contenu à animer</div>
- Pour animer plusieurs éléments en même temps, vous pouvez utiliser une classe d’animation groupée, comme
fadeInDown, qui animera tous les éléments avec une animation de fondu vers le bas. - Il est également possible de contrôler le délai d’exécution de l’animation en utilisant la classe
delay-<duration>, où <duration> est la durée en secondes. Par exemple, pour définir un délai d’animation de 2 secondes, vous pouvez utiliser la classe delay-2s :
<div class="animated fadeIn slower delay-2s">Contenu à animer</div>
- Enfin, vous pouvez utiliser JavaScript pour déclencher des animations en fonction d’événements spécifiques, tels que le défilement de la page, le clic sur un bouton, etc. Vous pouvez utiliser des bibliothèques telles que jQuery pour gérer les événements et les animations, ou écrire du code JavaScript natif.
