Dans cette leçon vidéo, le formateur explique les transitions CSS, une technique permettant de passer de façon progressive entre les états d’un élément (par ex. du statut normal au survol). Il montre d’abord un exemple simple avec une div rouge qui devient blanche au survol, puis détaille les propriétés de transition (transition‑property, transition‑duration, transition‑timing‑function, transition‑delay) et leurs valeurs typiques (all, 1s, ease, etc.). Il introduit la syntaxe raccourcie (transition: all 1s ease) et mentionne les préfixes vendeurs (-moz-, -webkit-, -o) pour les anciens navigateurs. Le formateur montre comment appliquer les mêmes transitions aux deux états (initial et hover) pour obtenir une animation bidirectionnelle, et comment animer d’autres propriétés comme border‑radius pour transformer un rectangle en cercle. Il explique le principe d’interpolation de mouvement, où le navigateur génère automatiquement les images intermédiaires entre deux styles clés. Enfin, il applique les transitions à la création d’un menu accordéon vertical, puis montre comment le rendre horizontal en modifiant le display et la largeur, illustrant ainsi l’usage pratique des transitions pour des interfaces interactives.
Chapters
Bonjour à tous et bienvenue dans cette nouvelle leçon de CSS. Aujourd'hui nous allons traiter les transitions. Les transitions est une technique qui permet de passer d'une manière progressive entre les états d'un objet. Par exemple, pour un lien hypertexte, pour passer d'un état initial à un état survolé, le passage se fait d'une manière brusque et instantanée. Avec les transitions, ce passage sera fait en douceur et ça va laisser place à une animation. Pour mieux comprendre le principe, rien ne vaut un exemple. Alors dans nos codes HTML, nous allons essayer d'intégrer une balise div avec le ID maDiv. Voilà, on va rien mettre dedans et on va essayer de la styler en la dotant d'une bordure et d'un arrière-plan. Alors dans le CSS, on va prendre le sélecteur maDiv et on va mettre border: solid 1px Par exemple la couleur noire. Width, on va prendre 300 pixels. Height, 300 pixels aussi. Et background-color, on va prendre le rouge. Quand j'exécute pour voir le résultat, bon, ça va nous donner un carré rouge qui mesure 300 pixels sur 300 pixels. Maintenant on va prévoir l'état survolé de cette div. Il suffit de copier ce code On va le modifier légèrement, on va ajouter ici la pseudo-classe hover. Comme on a vu dans la leçon des pseudo-classes et pseudo-éléments, les pseudo-classes ne peuvent pas s'appliquer qu'aux liens hypertextes mais à tous les objets HTML. Alors là on va retirer ces styles parce qu'ils vont être irrités de toute manière. Et là on va changer la couleur d'arrière-plan, par exemple elle va prendre la couleur blanche fff. Maintenant quand j'exécute, j'ai vais voir que quand je vais survoler, la div change de couleur instantanément. C'est-à-dire le passage du rouge à du blanc passe d'une manière brusque. Et c'est là où interviennent les transitions. Les transitions vont tout simplement permettre un passage en douceur entre la couleur rouge et la couleur blanche. Comment est-ce qu'on va faire? On va tout simplement aller sur l'état survolé et on va ajouter la syntaxe suivante. Transition property. Ça veut dire que pour appliquer une transition, il y a certains points qu'il faut paramétrer. Le premier point, c'est la propriété à traiter par la transition. C'est-à-dire que si vous voulez juste changer le background, alors il suffit de mettre ici background. Si vous voulez changer la bordure, vous mettez border, etc. Mais en général, on va mettre all pour dire toutes les propriétés CSS qui changent d'un état initial à un état survolé, dans ce cas, ils sont concernés par la transition. Ensuite, on va mettre transition-duration. Bon, ça veut dire la durée. On va mettre par exemple une seconde. Dans ce cas, le passage de l'état initial à l'état survolé va prendre une seconde. C'est comme une animation qui va prendre une seconde de durée. Ensuite, transition-timing-function. Ici, on appelle ça l'accélération ou bien la cadence du mouvement. Ça veut dire, est-ce que vous voulez que le mouvement soit constant du début à la fin, ou bien vous voulez qu'il soit accéléré ou bien décéléré, etc. Généralement, on va mettre ease. Ease, c'est un mouvement décéléré, ça veut dire que ça commence rapidement et ça finit doucement. Sinon, on peut mettre ease in, ça veut dire le mouvement commence doucement et ça finit rapidement. Ou bien ease out, qui a presque le même rendu que ease, sauf que c'est moins visible. Ça veut dire que le mouvement commence rapidement et ça finit doucement, mais c'est moins visible que l'effet de ease. Il y a aussi ease In out. Dans ce cas, le mouvement, il va commencer doucement, il va prendre de la vitesse vers le milieu et ensuite on va finir doucement encore. Et enfin, il y a linear. Linear, c'est un mouvement qui est constant du début à la fin. Mais l'effet qui donne vraiment le meilleur rendu, c'est ease. C'est un mouvement décéléré, c'est-à-dire qui commence rapidement et qui finit doucement. Bon, il y a une autre propriété que l'on peut ajouter, mais elle est facultative, c'est transition. Delay. On va mettre par exemple une seconde. Ça veut dire qu'au moment où vous allez survoler l'objet, l'animation ne va pas commencer instantanément, il va prendre une seconde et ensuite ça va commencer. Alors nous, on va retirer delay parce qu'il est rarement utilisé. On va se contenter de ces propriétés-là. On exécute pour voir le résultat. Quand je survole, on regarde bien que la transition a été appliquée, c'est-à-dire que le passage de rouge à du blanc passe un certain moment, et exactement une seconde. Maintenant on va revenir sur le code pour essayer de l'améliorer un petit peu. Alors là, au lieu de mettre 3 lignes pour spécifier des transitions, on va se contenter d'une seule. On va mettre transition: donc là on va mettre all pour dire la propriété, une seconde pour dire la durée, et ease pour le timing-function. Quand on exécute, le rendu sera toujours le même. Il faut juste noter une chose, c'est que certains navigateurs, surtout les anciens, ils n'arrivent pas à reconnaître cette syntaxe. Ils ont besoin de ce que l'on appelle un préfixe vendeur. Le préfixe vendeur, c'est quoi? C'est tout simplement, on va mettre quelque chose comme ça, par exemple -moz-. Ça veut dire que cette syntaxe est applicable uniquement sur le moteur de rendu Gecko, bien sûr Mozilla. Il y a aussi WebKit pour dire pour le moteur WebKit, c'est le cas de Safari par exemple, ou bien Chrome. Il y a aussi -o pour dire Opera, mais comme j'ai dit, c'est uniquement pour les anciens navigateurs. Mais actuellement pour les navigateurs qui sont mis à jour, on n'a pas besoin de faire ça. Cette syntaxe est largement reconnue. Alors maintenant on regarde encore une fois l'animation. Quand je survole, l'animation est bien faite dans ce sens, mais quand je quitte, on voit que l'état initial est retrouvé instantanément. Alors il suffit de prendre cette syntaxe et la mettre aussi dans l'état initial de ma div. Maintenant on aura l'animation dans les deux sens quand je survole. Et quand je quitte. Bon, on peut changer d'autres propriétés, ça veut dire au lieu de se contenter uniquement de l'arrière-plan, on peut ajouter aussi border-radius. On va mettre par exemple la moitié de la largeur, à savoir 150 pixels, pour avoir un cercle parfait. Dans ce cas, on va changer l'arrière-plan et aussi on va changer la forme de l'objet. Alors je survole et voilà ce que ça donne, donc c'est un cercle. Et voilà, donc là je retrouve mon rectangle avec l'état initial. Si on analyse un petit peu cette animation, on va voir qu'on n'a pas fait beaucoup de choses pour la réussir. On appelle cette technique d'animation l'interpolation de mouvement. Ça veut dire que le navigateur, il n'a besoin que de 2 images clés ou bien de 2 styles clés, à savoir l'état initial et l'état survolé. Et lui, il va tout simplement déduire toutes les images qui sont intermédiaires pour réussir une animation fluide. Bon, généralement avec une cadence de 24 images par seconde. Alors dans ce cas, toutes les images intermédiaires ont été générées automatiquement par le navigateur. Cette technique est alors appelée interpolation de mouvement, mais on va la voir en détail encore dans la partie animation en CSS. Maintenant, nous allons essayer de voir un exemple en se basant sur les transitions. On va essayer de créer un menu accordéon. Le menu accordéon, c'est tout simplement un menu de navigation que l'on va doter d'une animation de telle sorte à ce que ça ressemble à un accordéon. Alors là, ce qu'on va faire, c'est que tout d'abord on va intégrer notre menu grâce aux balises. Par exemple, on va mettre nav si vous voulez. Ensuite, on met la balise a href, on va mettre juste dièse pour dire la page courante. Par exemple, là c'est accueil. On va mettre copier. On va intégrer par exemple 4 entrées. On peut faire ça aussi avec les balises listes, c'est possible. Là par exemple, présentation. Et là, contact. Voilà, maintenant quand j'exécute, je vais voir que le menu ressemble à ça. Bien sûr, on va changer le rendu par défaut. Dans le CSS, on va enlever ça, on va mettre nav a, on va mettre display block pour que ça soit des balises de type bloc. Alors dans ce cas, les liens, ils sont positionnés verticalement l'un après l'autre. Ensuite on va mettre text-decoration: none; pour éliminer le souligné. Ensuite padding par exemple 20px, border-bottom par exemple solid 1px, on va mettre à noir. On va d'abord voir ce que ça donne. Alors ça donne ceci. Voilà, background-color, on va mettre un gris clair, on va dire #EEE, ça va donner ça à la fin. Voilà, on va aussi changer la couleur, on mettra par exemple du noir. OK, bon, maintenant quand je survole, alors il suffit de faire ça, On va changer la couleur d'arrière-plan, par exemple on veut que ça soit un peu plus foncé, on va mettre AAA. La bordure, on veut que ça soit plus grande, par exemple 30px. Voilà. Et la couleur, on veut que ça soit un peu plus clair, par exemple FFF. Quand je survole, Ça va donner ceci. Mais bien sûr, on veut pas avoir cet effet d'une manière instantanée. Alors on va intégrer les transitions. Alors il suffit d'ajouter la syntaxe de tout à l'heure, transition all, par exemple 0,5 secondes ease. On va faire ça aussi pour l'état initial. Quand j'exécute, l'animation a pris place Et à la fin, ça ressemble réellement à un accordéon. On peut faire une petite transformation, c'est que si vous voulez rendre le menu horizontal, il suffit de mettre là display inline-block. Mais on va aussi doter nos balises a d'une largeur, par exemple width 200 pixels. Et ensuite, on peut éliminer ça, ça veut dire tous les styles qui sont dupliqués, pas la peine de les conserver. Là encore, text-decoration, je peux éliminer ça. J'exécute et ça va donner ça. Donc là, c'est pour un menu horizontal. Merci pour votre attention et à la vidéo prochaine.
