Techniques Avancées des illustration Animée en CSS

Illustrations animées en CSS : les bases

Tous les jeudis du mois de janvier, nous nous pencherons sur des exemples d'illustrations CSS à la difficulté croissante. Au programme d'aujourd'hui : 2 exemples très simples et pourtant opposés : des icebergs et un petit feu de camp.

Les notions importantes

Bien qu'étant le premier article du mois (et donc le premier sur les illustrations animées en CSS), cet article n'en reste pas moins technique. Bien qu'étant fait pour tous les intégrateurs, même les plus débutants, il demande quelques bases simples que je ne prendrais pas la peine d'expliquer ici : écrire du code HTML, les balises, le fonctionnement du CSS, etc.

Avant d'aborder le reste de l'article, je vous conseille donc de jeter un oeil à The Shapes of CSS, qui recense les différentes formes de bases que vous pouvez faire en CSS. Cette page est tout simplement un must-have, et vous aidera à bien avoir en tête les différentes briques que vous aurez à votre disposition pour vos illustrations CSS.

L'illustration en CSS fait aussi un usage intensif des pseudos-éléments before et after. Si vous n'êtes pas à l'aise avec cette notion, ce vous conseille de lire ou relire la page du MDN sur les pseudo-éléments.

Enfin, je vous conseille la lecture de la page MDN sur les animations pour vous remettre dans le bain avant d'attaquer les exemples.

Un point sur les préprocesseurs (sass, jade, stylus, …)

Codepen est un lieu où vous pourrez trouver une très grande diversité de langages, que ce soit au niveau de la partie HTML (jade, slim, haml, …), Css (sass, stylus, les), ou Javascript. Je peux comprendre que certains parmi vous soient récalcitrants à apprendre et utiliser ces langages, mais vous ne pourrez pas utiliser codepen au mieux de ce qu'il peut vous offrir si vous n'êtes pas au moins capable de comprendre ce genre de langage quand vous les croiserez.

Si vous n'avez jamais croisé de préprocesseurs, je vous conseille de jeter un œil à la documentation de Sass ainsi qu'à la documentation de Pug, qui sont à mon gout les langages les plus stricts que vous pourrez trouver respectivement pour le CSS et le HTML.

Je vais supprimer les variables et mixins avant de présenter les exemples, mais je ne compte pas changer les langages utilisés, ni faite sauter l'imbrication. Soyez donc prévenu, et n'hésitez pas à utiliser l'option "view complied css" en cas de soucis.

Premier décryptage : Iceberg ! de Bryce Snyder

Notre premier décryptage est le plus simple de la liste, les icebergs. Ce pen est vraiment très simple, composé uniquement de deux formes différentes : le triangle pointant vers le haut, et le triangle pointant vers le bas. N'hésitez pas à ouvrir la page codepen (dans un autre onglet) pour suivre le code source en même temps que cet article !

Pour commencer, je vous propose une version "simplifiée" de l'originale. Comme vous pourrez le voir si vous comparez les deux, j'ai grandement réduit les lignes en supprimant ce qui ne servait à rien et en extrayant la structure principale de l'iceberg, qui se répétait dans la version de l'auteur.

Comme vous pouvez le voir, un iceberg est composé de 3 parties : l'élément en lui-même (en bleu) et ses pseudos-éléments before et after (respectivement en rouge et jaune), et le code permettant de créer notre forme est vraiment tres simple. L'exemple de Bryce Snyder utilisait deux icebergs imbriqués, ce que j'ai repris tel quel. Vous pouvez noter que les lignes permettant de personnaliser les icebergs les uns des autres sont tous liés à la couleur ou à l'animation, donc uniquement de la petite personnalisation.

Tips : Saviez vous que l'attribut "color" d'un élément définit non seulement la couleur du texte, mais aussi celle des bordures d'un élément ? Vous pouvez voir cela utilisé pour colorier les différents éléments de nos icebergs.

D'un point de vue animation, nous sommes ici face à quelque chose de très simples : un simple mouvement de haut en bas qui se répète à l'infini. J'ai décalé légèrement les deux mouvements pour créer un effet plus "vagues sur l'océan".

Second décryptage : Fire Loader de Jitendra

Ce second exemple est un petit peu plus complexe au niveau de l'animation, et c'est donc sur ce point que nous allons le plus nous concentrer. D'un point de vue éléments, nous avons #nightfirewood, composés de deux rectangles croisés grace à une rotation.

Au-dessus, nous avons nos trois flammes, qui sont de simples carrés ayant là aussi subi une rotation. Je n'ai pratiquement pas touché le code de l'auteur, si ce n'est pour corriger les noms des classes, variables et animations pour une meilleure lisibilité.

Tips : [class^="…"] permets de sélectionner tous les éléments dont la classe commence par la même chaîne de texte. Pratique si vous n'avez pas envie de multiplier vos classes sans pour autant vous répéter.

Au niveau des animations, nous avons quelque chose d'un petit peu plus fourni que le balottement de nos deux petits icebergs : les trois flames sont animées séparément, et subissent à la fois une rotation et une mise à l'échèle (scale).

Vous pouvez aussi remarquer qu'il y a une troisième transformation qui se retrouve animée, bien que sa valeur reste tout le temps la même : rotate. Vu qu'elle ne bouge pas, vous auriez peut être envi de la supprimer, ce qui transformera nos losanges en carrés. La raison à ça est très simple : la propriété animée est ici transform, et les trois transformations ne forment qu'une seule "grosse valeur" à cet attribue. retirer la rotation la supprime donc purement et simplement des transformations appliquées.

Contrairement aux icebergs, notre animation n'est pas en "infinite alternate" mais simplement en "infinite". Cela devrait en théorie nous donner une animation qui "saute" car elle n'est pas lue une répétition sur deux en reverse, mais l'animation reste fluide car l'auteur à prit soin de revenir à son point de départ à la fin de l'animation. Cela permet de profiter différemment de la fonction de easing.

Un petit mot pour finir

Nous avons vu deux exemples très simples, qui doivent être à la portée de tous les intégrateurs, même les plus débutants. Si ces exemples vous semblent complexes, je vous conseille de vous pencher de plus près sur les points qui vous posent problème, ils pourront surement vos servir dans votre vie de tous les jours.

Qu'avez-vous pensé ce premier numéro, était-il trop long, trop court ? Les points vus vous ont-ils semblé pertinents ? Qu'avez-vous pensé de la difficulté des points abordés ?

Ce format est tout jeune, et a donc grandement besoin de vos avis dans les commentaires pour évoluer et s'améliorer, n'hésitez donc pas à laisser un petit message !