Dans cette vidéo tutorielle en français, le présentateur explique comment créer des animations CSS autonomes, distinctes des transitions qui nécessitent une interaction utilisateur. Après un rappel rapide sur les transitions, il montre comment définir une animation en attribuant un nom via la propriété `animation-name`, puis en précisant la durée (`animation-duration`), la fonction de timing (`animation-timing-function`) et d’autres propriétés partagées avec les transitions. Il introduit la règle `@keyframes` pour définir les images‑clés de l’animation à l’aide de pourcentages (0 %, 50 %, 100 %) et de transformations (`transform: scale()`). Un exemple pratique anime un cercle qui grandit puis disparaît, puis revient à sa taille initiale. Le présentateur montre comment rendre l’animation continue avec `animation-iteration-count: infinite`. Ensuite, il ajoute une seconde div et utilise les sélecteurs `:nth-child` pour appliquer deux animations complémentaires : quand l’une est à 100 % de son échelle, l’autre est à 0 %, et inversement. Le code complet, les résultats visuels et les possibilités d’étendre ces concepts à des animations plus complexes sont présentés, avant de conclure la leçon.
Chapters
Bonjour à tous et bienvenue dans cette nouvelle vidéo de CSS. Aujourd'hui, nous allons traiter les animations. Dans une vidéo précédente, nous avons parlé des transitions CSS. Les transitions permettent de créer des animations entre l'état initial et l'état avec une pseudo-classe d'un objet. Par exemple, si on survole une div, celle-ci peut changer son style CSS à l'aide de la pseudo-classe: :hover. Pour passer de l'état initial à l'état survolé, on applique une transition afin que ce passage soit fait en douceur et du coup ça crée une animation. Alors, pour qu'une transition soit appliquée, il faut que l'élément change d'état à l'aide d'une pseudo-classe. Aujourd'hui, nous allons voir comment créer des animations indépendamment de l'intervention de l'utilisateur, c'est-à-dire que l'animation sera jouée sur le navigateur d'une manière automatique. Considérons le code HTML suivant: dans la balise body, nous avons intégré une div en guise de conteneur identifiée par container Et dedans nous avons placé une autre div dont la classe est item. Le style CSS que nous avons appliqué est celui-ci. Et sur le navigateur on aura le résultat suivant. Alors nous avons ici un cercle qui constitue la balise dont la classe est item. On veut maintenant faire animer cet objet. Il faut d'abord aller sur item et ensuite on déclare la propriété animationName. Et on lui donne un nom, par exemple monAnimation. Comme ça. Alors maintenant, nous avons appliqué la première propriété qui concerne les animations, c'est-à-dire que c'est possible d'avoir beaucoup d'animations sur notre page web. Il faut les identifier chacune par un nom unique. Dans ce cas, le nom que j'ai donné à cette animation, c'est monAnimation. Ensuite, on peut spécifier d'autres propriétés pour l'animation. D'ailleurs, il y a beaucoup de propriétés qui se partagent entre les animations et les transitions. Là, par exemple, on va mettre animation duration, c'est la durée de l'animation, par exemple une seconde. Ensuite animation timing function, on va mettre linear pour dire que c'est linéaire parce que par défaut c'est ease. Maintenant que nous avons fait ça, nous avons défini ce que l'on appelle les images clés parce que n'oubliez pas que le principe des animations dans ce cas c'est ce que l'on appelle l'interpolation de mouvement. C'est-à-dire qu'au lieu de définir toutes les images qui vont être défilées afin de créer une animation, il suffit de créer quelques images clés et laisser le navigateur deviner les images qui sont intermédiaires. Alors là, on va utiliser une règle@ qui s'appelle keyframes et on va lui donner le même nom que l'animation, dans ce cas animation. On ouvre des accolades et là je vais spécifier les différentes images clés que je veux donner à mon animation, ça veut dire les différents points de changement qui concernent l'animation. Par exemple, imaginez que le cercle que j'ai ici, je veux qu'il soit réduit jusqu'à ce qu'il disparaisse, et ensuite je veux qu'il gagne encore en volume jusqu'à ce qu'il ait la taille qu'il a maintenant. Alors on va créer 3 images clés: une image de début, une image du milieu et une image de fin. Cette image de fin va correspondre à l'image du début. Alors comment est-ce qu'on va spécifier ces images clés? C'est grâce aux pourcentages. On va mettre 0% pour dire au premier instant, et maintenant on va mettre le style que je veux appliquer. Par exemple, je veux que l'élément disparaisse carrément, ça veut dire je veux que sa taille soit 0. Alors je peux mettre transform et scale, et là je vais mettre 0. Alors dans ce cas, l'élément va disparaître carrément. Ensuite, je vais tout simplement prendre ce style et je vais le copier. Ici, c'est l'instant 50%, ça veut dire au milieu de l'animation, ça veut dire à l'instant 0,5 seconde. Ici, scale, ça va être 1. Bon, ça veut dire que maintenant on est arrivé à la taille maximale qui est 100 pixels. Et à l'instant 100%, ça veut dire vers la fin de l'animation, on va encore mettre 0 comme ça. Bon, ça veut dire au début de l'animation c'est 0, au milieu c'est 1, et à la fin c'est 0. Si on actualise pour voir le résultat, on obtient ceci. Vous avez remarqué qu'à la fin il y a la taille 100 qui a été restituée parce que tout simplement c'est la taille par défaut de l'objet. Mais maintenant ce qu'on va faire, c'est quoi? Parce que vous avez constaté que l'animation est faite une seule fois. Je veux maintenant qu'il tourne à l'infini, c'est-à-dire que je veux que mon animation se répète d'une manière perpétuelle, bon du moins jusqu'à ce que l'utilisateur ferme le navigateur. Alors là je vais mettre animation-iteration-count. Ici vous mettez le nombre de fois où vous voulez que l'animation soit répétée. Il suffit de mettre le mot-clé infinite pour dire que c'est une animation qui va se produire à l'infini. Maintenant quand j'actualise, je vois que mon animation est faite d'une manière perpétuelle. Pour le moment, nous allons essayer d'intégrer une deuxième div de telle sorte à ce que les deux divs soient animées de la manière suivante: si la div de gauche est à 100% de son volume, alors la div de droite sera à 0% et inversement. Alors ce qu'on va faire, c'est aller dans le code HTML et on va intégrer une deuxième div dont la classe est item, comme ça. Maintenant, si on exécute pour voir le résultat sur le navigateur, on aura ça. Les deux divs s'animent de la même manière, c'est normal parce qu'ils se partagent toutes les deux la même animation dont le nom est mon animation qu'on a ici. Maintenant je vais créer une deuxième animation qui va s'appliquer sur la deuxième div de telle sorte à ce que j'aurai aussi l'effet souhaité. Alors là j'ai d'abord besoin de cibler chacune des deux divs. Bon n'oubliez pas que les divs ils ont été intégrés dans le container, ils ont toutes les deux la même classe item item. Il suffit de cibler le premier enfant et le deuxième enfant de cette manière. Donc là .item nth-child et encore nth-child. Voilà, donc ici pour le premier enfant on va prendre ce code qui est là. Ça veut dire c'est un code qui va s'appliquer exclusivement au premier enfant de cette manière. On va faire la même chose pour le deuxième enfant aussi. Voilà, ça veut dire c'est les mêmes animations mais on va changer de nom. Là par exemple on va mettre une animation 1 Et là, mon animation 2. Ici, le keyframe qui sera appliqué, c'est pour mon animation 1. Bon, maintenant si on regarde un petit peu ce qui va se passer, on voit que la div de gauche s'anime alors que la deuxième n'est pas animée parce qu'on n'a pas encore créé l'animation 2. Maintenant, ce qu'on va faire, c'est encore copier ça et mettre ici animation 2. Donc là, c'est les séquences d'images clés qui vont s'appliquer à l'animation 1, et là, c'est les images clés de l'animation 2. Bon, comme j'ai dit, je veux que les animations soient un petit peu complémentaires. Ça veut dire, si une div est à 100% de son volume, l'autre sera 0%. Alors là j'ai 0, il suffit de mettre ici 1, et là c'est 0, et là c'est 1. C'est-à-dire c'est l'inverse. Maintenant quand j'exécute pour voir le résultat, moi ça me donne cet effet comme ça. Donc on constate bien qu'ils sont complémentaires et on a réussi l'effet souhaité. Alors là c'était un simple exemple de comment créer ces animations avec le CSS, mais bien sûr vous pouvez réussir des animations qui sont plus complexes et plus abouties que ça en se basant sur la syntaxe que l'on vient de voir. Merci pour votre attention et à la vidéo prochaine.
