• 15 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 25/11/2019

Découvrez les animations web

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

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.

Une animation de Mickey Mouse qui est petite et qui grossit

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 ?

                                             Animation CopdePen Beresnev

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 :

Une animation en CSS avec 3 capsules

Ou un feedback visuel destiné à l’utilisateur en cas d’erreur :

Un champ email qui devient rouge et qui tremble lorsque l'email n'est pas correct

Ou encore l’amélioration de l’engagement utilisateur. Typiquement, par l’ajout de mouvements sur un bouton de menu, par exemple.

Une animation d'un menu qui disparaît au clic et qui est remplacé par une croix
Un exemple de menu

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 !

Exemple de certificat de réussite
Exemple de certificat de réussite