Short video - Les transitions CSS

27 Oct 2022 · 2 min

Watch on YouTube

1:49

Dans cette courte vidéo, le présentateur explique ce que sont les transitions CSS et pourquoi elles sont utiles pour rendre les changements d’état d’un élément (comme le passage d’un lien ou d’une div du statut normal au statut survolé) plus fluides au lieu d’être instantanés. Il montre un exemple concret : création d’une balise <div> avec l’id « maDiv », style de base (bordure noire, largeur et hauteur de 300 px, fond rouge). Ensuite il ajoute la pseudo‑classe :hover pour changer la couleur de fond en blanc, ce qui, sans transition, se produit brusquement. Le présentateur souligne que les pseudo‑classes s’appliquent à tout élément HTML, pas seulement aux liens, et introduit l’idée que les transitions permettent d’animer ce passage de couleur de façon douce. La vidéo se termine en préparant le terrain pour appliquer la propriété transition afin d’obtenir l’effet d’animation.

Chapters

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, 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, 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 hérités de toute manière. Et là, on va changer la couleur d'arrière-plan. Par exemple, il va prendre la couleur blanche, #FFF. Maintenant, quand j'exécute, je 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.