Bienvenue dans ce cours !
Ensemble nous allons parcourir le monde des animations CSS.
Si vous êtes ici, vous avez sûrement déjà appris à créer de superbes pages web fonctionnelles. Mais est-ce que vous avez déjà essayé de leur donner vie ?
Parce que c’est ce que fait l’animation : elle prend un objet inerte, et lui insuffle un souffle de vie. Rien que ça !
Je m’appelle Alexia, je suis développeuse fullstack, passionnée par le front-end. Je vais vous guider tout au long de ce cours pour apprendre à maîtriser les animations CSS. 💪
Mais avant de nous plonger dans le cœur du sujet, j'aimerais éclaircir un point avec vous. Tout au long de ce cours, vous verrez des exemples de code. Si vous voulez tirer le maximum de ce cours, il est important que vous preniez le temps de les tester par vous-même. Pour cela, vous pouvez utiliser vos propres outils de développement, ou des éditeurs de code en ligne tels que CodePen, CodeSandbox ou d'autres. N'hésitez pas à tester des choses, vous ferez des erreurs, mais ce n'est pas grave ! Faire des erreurs fait totalement partie de l'apprentissage du développement. Alors lançons-nous ! 🚀
Apprenez-en plus sur les animations
Quand vous entendez le mot « animation », cela vous évoque peut-être une fameuse petite souris qui parle, dessinée à l’aide de cercles.
C’est normal. Pour la simple et bonne raison que le créateur de Mickey Mouse est celui qui a fait découvrir l’animation au grand public, via l’animation cellulo dessinée à la main. Mais il ne s'agit que de la partie émergée de l’iceberg des techniques d’animation. De nos jours, l’animation cellulo a été remplacée par l’animation 3D, rendue célèbre par une petite bande de jouets vivants, menés par un ranger de l'espace et son ami le cow-boy. Il existe aussi l’animation de pâte à modeler.
Aujourd'hui, l'animation est partout. Là où vous pouvez trouver un écran, vous trouverez probablement des animations : que ce soit dans les jeux vidéo, sur vos objets connectés, vos applications mobiles, et bien sûr… sur les sites web !
Partons à la découverte des animations web
Avez-vous déjà vu passer cette animation ?
Publiée sur CodePen en 2018 par Beresnev, cette animation est la plus vue de la plateforme. Et ce n'est pas étonnant : il s'agit d'une véritable œuvre d'art, quand on sait que tout a été entièrement réalisé en CSS ! Pourtant, avant d'en arriver là, il a fallu quelques étapes…
Mais quelles sont ces étapes ?
Aux débuts d'Internet, les pages web étaient de simples documents, constitués de texte et de liens vers d'autres pages. Le CSS n'existait même pas ! Vous vous rendez compte ?
La première forme d'animation est apparue sur une page web en 1987, avec la création du GIF (que vous le prononciez avec le son "g" ou le son "j", le résultat est le même). Cela a d'ailleurs été la seule forme d'animation pendant presque 10 ans, jusqu'à l'apparition de Flash.
Adobe Flash Player, ça vous dit quelque chose ?
À partir de là, l'animation est devenue de plus en plus répandue sur les sites Internet. Mais avec la naissance du mobile, et le refus de la part d'Apple de supporter cette technologie sur leur matériel, Adobe Flash Player est progressivement devenue une technologie dépréciée.
Aujourd'hui, les techniques d'animation sont nombreuses : JavaScript, SVG, Canvas, WebGL mais surtout CSS. Le couplage CSS3/HTML5 fait partie des techniques les plus utilisées pour créer des animations web. Ça tombe bien, c’est pour cela que nous sommes là aujourd’hui !
Ouvrez la porte des possibilités
Tout au long de ce cours, nous créerons des animations directement en codant en CSS. Plutôt que de dessiner des personnages ou de déplacer des marionnettes, nous allons écrire des bouts de CSS pour faire évoluer l’apparence d’éléments HTML sur une certaine durée. Par exemple l’animation de la couleur d’un bouton :
Ou un feedback visuel destiné à l’utilisateur en cas d’erreur :
Ou encore l’amélioration de l’engagement utilisateur. Typiquement, par l’ajout de mouvements sur un bouton de menu, par exemple.
Le cerveau humain est conçu pour remarquer les mouvements : pour être aux aguets en cas de danger, pour trouver de la nourriture, et pour prendre en compte les signaux silencieux qui sont partie intégrante de notre communication. En animant des éléments d’une page web, nous pouvons capter l’attention de nos visiteurs et les guider sur notre site, grâce à des indices qui leur permettront de vivre une expérience plus fluide et plus agréable. Alors c'est parti ! 🚀
En résumé
vous pouvez créer vos animations CSS sur vos propres éditeurs de code, ou bien sur des outils de code en ligne tels que CodePen ou CodeSandbox ;
l'animation a été démocratisée auprès du grand public par Disney ;
les techniques d'animation web n'ont cessé d'évoluer depuis les débuts du web : GIF, Flash, etc. ;
aujourd'hui, il existe de nombreuses techniques d'animation web : JavaScript, SVG, Canvas, WebGL mais surtout CSS ;
l'animation permet d'ajouter de la vie à une page web, et ainsi de vraiment impacter l'expérience d'un utilisateur sur cette page.
Maintenant que vous savez ce qu’est une animation CSS et pourquoi elles ajoutent tant de valeur à nos pages web, nous allons pouvoir mettre nos pixels en mouvement !
