Animer des icônes en CSS
Elliott Chiaradia | 06-06-2016
Les icônes pullulent sur le web et à raison, car comme disait Confucius : "une image vaut mille mots". Je vais donc vous présenter une solution élégante permettant d'ajouter des icônes en pure CSS, puis de les animer. Pour cela, nous allons devoir utiliser trois librairies différentes, à savoir : Font Awersome, Font Awesome Animation et Wait! Animate. Pour chacune d'elles, je vous expliquerais en quelques mots comment l'utiliser.
Font Awesome
Malgré la popularité de la librairie Font Awesome, je me permets tout de même de vous la présenter brièvement avant de passer aux animations à proprement dit.
Font Awesome est une librairie d'icônes très utilisée sur le web, car elle est très simple à manipuler et qu'elle est super utile. Oui, à l'heure actuelle elle ne propose pas moins de 634 icônes gratuites ! Et celles-ci peuvent être agrandis à l'infinie sans qu'elles ne soient pixelisées, car les icônes ne sont pas des images à proprement parlé, mais elles sont bien le fruit d'une police de caractères (d'où le nom de la librairie "Font"...). Maintenant que vous savez à quoi elle sert, regardons comment l'utiliser.
Pour télécharger la librairie, je vous invite à cliquer ici. Après l'avoir décompressée, déplacez ses dossiers dans le répertoire de votre projet. Puis, ajoutez l'appel au fichier CSS font-awesome.min.css dans votre <head>.
<link rel="stylesheet" href="css/font-awesome.min.css">
Maintenant que la librairie est chargée, il vous suffit de choisir une icône dans la liste proposée par Font Awesome, puis de copier la balise <i> qui nous est présentée et de la copier dans notre code HTML, à l'endroit où nous voulons afficher l'icône. Par exemple, voici la balise que nous devons utiliser si nous voulons afficher le symbole "vu".
<i class="fa fa-check" aria-hidden="true"></i>
Vous pouvez bien évidemment utiliser du CSS pour manipuler ces icônes. N'oubliez pas que vous manié une font, de ce fait vous devez utiliser les règles adéquates aux polices. Si nous voulons que celle-ci soit de couleur rouge et qu'elle ait une taille de 36px, alors nous devons lui définir ces règles CSS suivantes :
<i class="fa fa-check" aria-hidden="true" style="color:red;font-size:36px;"></i>
Font Awesome Animate
Comme son nom l'indique, Font Awesome Animate permet d'ajouter des animations aux icônes originaires de Font Awesome.
Pour télécharger la librairie, rendez-vous sur cette page et copiez le code présent dans un fichier que placerez dans votre répertoire "CSS" et que vous nommerez "font-awesome-animation.css". Dans le head, juste en dessous de votre appel à Font Awesome, rajoutez-y l'appel au fichier "font-awesome-animation.css".
<link rel="stylesheet" href="css/font-awesome-animation.css">
Pour ajouter une animation sur notre symbole "vu", choisissez une animation disponible au bas de cette page. Puis, dans votre fichier HTML, il suffit de rajouter la classe spécifique à l'animation voulue (dans mon exemple : "faa-wrench") suivie de la classe "animated".à l'icône que vous voulez voir bouger.
<i class="fa fa-check faa-wrench animated " aria-hidden="true" ></i>
Cette librairie offre aussi la possibilité de démarrer l'animation au survol de l'icône. Pour cela, vous devez remplacer la classe "animated" par "animated-hover".
<i class="fa fa-check faa-wrench animated-hover" aria-hidden="true" ></i>
Si vous voulez que l'animation se déclenche lors du survol de la balise parente de l'icône (dans cet exemple une balise <p>), vous devez rajouter les classes "faa-parent" et "animated-hover" à la balise parente.
<p class="faa-parent animated-hover">
<i class="fa fa-check faa-wrench" aria-hidden="true" ></i>
Texte Parent
</p>
Une dernière petite chose, vous pouvez changer la vitesse de l'animation à l'aide de la classe "faa-slow" pour la ralentir et "faa-fast" pour l'accélérer.
<i class="fa fa-check faa-wrench animated faa-fast" aria-hidden="true" ></i>
Wait! Animate
La librairie Font Awesome Animation nous offre effectivement des animations sympathiques, mais elle n'offre que très peu d'options de personnalisation. C'est là qu'intervient Wait! Animate, cette petite librairie basée sur Font Awesome Animation permet de gérer toutes sortes de choses (comme le temps d'attente entre chaque animation, le easing, la durée de l'animation, etc.) et ceci directement par le biais d'une interface web.
Il vous suffit de configurer les options de votre animation à l'aide du panneau "Custom Animation", puis de copier le code CSS de droite, que l'interface génère, dans votre fichier contenant les styles CSS de votre projet.
Pour que l'animation soit effective, nous devons rajouter à notre icône les classes définies dans le code généré, à savoir "MonAnimation" (le contenu du champ "name") et "wait1".
<i class="fa fa-check faa-wrench animated monAnimation wait1" aria-hidden="true" ></i>
Conclusion
Bien que ne fonctionnant pas avec les versions d'IE plus ancienne que la version 10, Font Awesome Animation couplé à Wait! Animate permettent d'ajouter des animations à nos icônes Font Awesome en toute simplicité et sans JavaScript ! Cependant, n'en abusez pas. Mettre des animations à tout va nuit gravement à la lisibilité. Je ne peux que vous conseiller de les utiliser avec modération, dans le but d'attirer l'attention d'un utilisateur sur un élément précis.
Sources :
