Créer des transitions en CSS

Jusqu’à présent, à chaque fois qu’on définissait le comportement d’une propriété CSS pour un élément, la valeur définie s’appliquait directement.

Les transitions CSS vont nous permettre de modifier la valeur d’une propriété CSS de manière fluide et selon une durée que l’on va pouvoir définir. On va donc pouvoir définir deux valeurs pour une propriété (une première valeur de départ ou valeur par défaut et une seconde valeur d’arrivée) et faire en sorte que la valeur change progressivement de la valeur de départ à la valeur d’arrivée.

On va ainsi par exemple pouvoir changer progressivement la couleur des textes de nos éléments ou modifier la taille d’un élément, etc.
Pour créer des transitions en CSS, nous allons pouvoir utiliser les différentes propriétés de type transition-* ou la propriété raccourcie transition.

Dans cette nouvelle leçon, nous allons commencer par étudier les propriétés complètes qui sont les suivantes :

• transition-property ;
• transition-duration ;
• transition-timing-function ;
• transition-delay.

Nous terminerons avec la création d’un transition complète en utilisant la propriété raccourcie transition.

 

Le fonctionnement d’une transition

Le principe de base d’une transition en CSS est de modifier progressivement la valeur d’une propriété. Pour cela, nous allons devoir indiquer deux valeurs pour la propriété pour laquelle on souhaite créer une transition.

Le premier souci ici est qu’on ne va pas pouvoir passer deux valeurs pour une même propriété avec un même sélecteur CSS pour créer une transition, car en faisant cela seule la dernière valeur déclarée serait lue.

Nous avons ici deux solutions pour contourner cette contrainte. La première qui va nous permettre d’exploiter tout le potentiel des animations va être d’utiliser un langage dynamique comme le JavaScript qui peut mettre à jour le nom d’un attribut class par exemple en fonction de certains critères.

Comme nous n’avons pas étudié le JavaScript, nous allons mettre de côté cette première solution. La deuxième méthode va être d’utiliser les transitions avec les pseudo-classes, c’est-à-dire lors d’un changement d’état d’un élément HTML.

Nous allons par exemple pouvoir changer la couleur de fond d’un élément div lorsqu’un utilisateur passe sa souris dessus comme ci-dessous :

See the Pen Cours HTML CSS 12.1.1 by Pierre (@pierregiraud) on CodePen.

Ici, on a utilisé deux propriétés pour créer une transition simple : la propriété transition-property qui sert à définir la ou les propriété(s) dont la valeur doit être modifiée progressivement et la propriété transition-duration qui indique le temps que va mettre la propriété à passer de sa valeur de départ à la valeur d’arrivée.

Comme vous pouvez le constater en observant le code CSS, on appliquer ces propriétés de transition à notre div dans son état normal et on définit deux couleurs de fond : orange dans l’état normal et bleu lorsque le div est survolé.

Lorsqu’on survole le div, sa couleur de fond va donc changer progressivement de l’orange vers le bleu sur une durée de 5 secondes. Notez que par défaut la transition se fait dans les deux sens : lorsqu’on sort du div, sa couleur de fond retourne progressivement vers l’orange.

Notez finalement qu’on ne va pas pouvoir créer des transitions avec toutes les propriétés car le concept de transitions est assez récent en CSS et donc le support n’est pas encore parfait. La plupart des propriétés vont tout de même pouvoir être animées.

 

La propriété CSS transition-property

La propriété transition-property va nous permettre de définir quelles propriétés vont être les cibles de nos transitions, c’est-à-dire quelles sont les propriétés dont la valeur va devoir changer progressivement.

On va pouvoir indiquer en valeur de transition-property soit le nom d’une propriété CSS pour laquelle on veut créer une transition, soit le nom de plusieurs propriétés CSS qui devront alors être séparées par des virgules, soit le mot clef all qui signifie que toutes les propriétés vont pouvoir être sujettes aux transitions (sous réserve qu’on indique ensuite une autre valeur d’arrivée pour créer la transition bien évidemment).

See the Pen Cours HTML CSS 12.1.2 by Pierre (@pierregiraud) on CodePen.

Dans cet exemple, on crée trois transitions pour chacun de nos trois div. Ici, on définit de nouvelles valeurs pour les propriétés color ; background-color et border de nos div lors de l’état hover.

Les transitions vont donc se faire lorsque l’utilisateur va passer sa souris sur un des div. Chacune des 3 transitions va durer 5 secondes.

Pour notre premier div, on applique la transition à la propriété background-color uniquement.

Pour notre deuxième div, on applique la transition aux propriétés background-color et border.

Pour notre troisième div, on applique une transition à toutes les propriétés qui ont plusieurs valeurs définies pour différents états de l’élément.

Notez que je n’ai pas défini de couleur de départ avec color. En effet, il n’est pas toujours strictement indispensable de définir des valeurs de départ pour les propriétés pour lesquelles on définit des transitions puisque la plupart des propriétés ont des valeurs par défaut. Pour color, la transition va donc se faire entre la valeur par défaut (noire) et la valeur d’arrivée spécifiée.

Ici, vous devez également bien comprendre qu’une transition ne va se déclencher que lors d’un changement d’état d’un élément. Ainsi, il est tout à fait possible de définir plus de deux valeurs pour une propriété à laquelle on souhaite appliquer une transition puisqu’on va pouvoir définir une valeur pour chaque état de l’élément.

Dans le cas où plusieurs changements d’état sont provoqués en même temps, la transition se fera vers la valeur de l’état déclaré en dernier en CSS. Par exemple, on peut définir une transition sur une couleur de fond en précisant une valeur d’arrivée pour l’état hover (survol) et l’état active (cliqué) :

See the Pen Cours HTML CSS 12.1.3 by Pierre (@pierregiraud) on CodePen.

 

La propriété CSS transition-duration

La propriété transition-duration va nous permettre de définir le temps que vont mettre les propriétés passées à transition-property pour passer d’une valeur de départ à une valeur d’arrivée. Nous allons pouvoir lui passer un nombre de secondes en valeur.

La valeur par défaut de transition-duration est 0s ce qui signifie que le changement de valeur des propriétés concernées par la transition sera immédiat.

See the Pen Cours HTML CSS 12.1.4 by Pierre (@pierregiraud) on CodePen.

Ici, on applique une transition sur la couleur de fond de nos éléments HTML div lors du passage de la souris sur l’un deux. Chaque transition a une durée différente définie avec transition-duration ce qui signifie que la couleur de fond mettra plus ou moins de temps à passer de sa couleur de départ à sa couleur d’arrivée selon le div.

 

La propriété CSS transition-timing-function

La propriété transition-timing-function va nous permettre de choisir la vitesse de la transition au sein de celle ci. Nous allons ainsi pouvoir créer des transitions totalement linéaires ou, au contraire, créer des transitions qui vont s’accélérer ou ralentir au milieu. Nous allons pouvoir passer les valeurs suivantes à cette propriété :

• ease : valeur par défaut. Permet de créer une transition relativement lente au début puis qui s’accélère au milieu et qui se termine lentement ;
• linear : permet de créer une transition totalement linéaire c’est-à-dire qui va aller à la même vitesse du début à la fin ;
• ease-in : permet de créer une transition avec un départ lent puis qui s’accélère ensuite ;
• ease-out : permet de créer une transition qui va ralentir à la fin ;
• ease-in-out : permet de créer une transition lente au début puis qui s’accélère au milieu et qui se termine lentement. Ressemble fortement à transition-timing-function : ease mais démarre plus lentement ;
• cubic-bezier(x1,y1,x2,y2) : sert à créer une transition à la vitesse totalement personnalisé en renseignant une courbe de Bézier.

Notre but n’est ici bien évidemment pas de faire un cours sur les courbes de Bézier. Vous pouvez simplement retenir les équivalents mot-clef/Bézier suivants qui peuvent se révéler utiles :

• transition-timing-function : ease est équivalent à transition-timing-function : cubic-bezier(0.25, 0.1, 0.25, 1) ;
• transition-timing-function : ease-in est équivalent à transition-timing-function : cubic-bezier(0.42, 0, 1, 1) ;
• transition-timing-function : ease-out est équivalent à transition-timing-function : cubic-bezier(0, 0, 0.58, 1) ;
• transition-timing-function : ease-in-out est équivalent à transition-timing-function : cubic-bezier(0.42, 0, 0.58, 1).

See the Pen Cours HTML CSS 12.1.5 by Pierre (@pierregiraud) on CodePen.

 

La propriété CSS transition-delay

La propriété transition-delay va nous permettre de définir quand la transition doit commencer à partir du moment où la nouvelle valeur est passée aux propriétés concernées par la transition. On va pouvoir lui passer une valeur en secondes.

La valeur par défaut est 0s (la transition se lance dès qu’une nouvelle valeur est définie pour une propriété à laquelle on a appliqué la transition).

See the Pen Cours HTML CSS 12.1.6 by Pierre (@pierregiraud) on CodePen.

 

La propriété CSS transition

La propriété CSS transition est la notation raccourcie des quatre propriétés étudiées précédemment. On va pouvoir lui passer les différentes valeurs des propriétés précédentes à la suite pour créer une transition complète.

La première durée renseignée dans transition définira la durée de la transition. Je vous conseille de suivre l’ordre de déclaration des valeurs suivant pour être sûr que transition fonctionne bien :

1. La valeur relative à transition-property ;
2. La valeur relative à transition-duration ;
3. La valeur relative à transition-timing-function ;
4. La valeur relative à transition-delay.

A noter que seules les valeurs relatives aux propriétés transition-property et transition-duration doivent être obligatoirement renseignées pour créer une transition visible. Les valeurs relatives aux propriétés transition-timing-function et transition-delay sont facultatives et si rien n’est renseigné les valeurs par défaut seront utilisées.

Notez également que pour créer plusieurs transitions pour plusieurs propriétés différentes avec transition il va suffire de séparer les différentes déclarations par une virgule.

See the Pen Cours HTML CSS 12.1.7 by Pierre (@pierregiraud) on CodePen.

Ici, on renseigne toutes les valeurs pour notre première transition dans la propriété transition. Pour notre deuxième transition, en revanche, on omet les deux dernières valeurs. Ce seront donc les valeurs par défaut ease et 0s qui seront utilisées.

Finalement, nous créons deux transitions dans notre dernier div. Pour faire cela, on se contente de séparer les différentes déclarations pour chacune de nos transitions par une virgule dans notre propriété transition.

 

Transition et reverse transition

Par défaut, lorsqu’on crée une transition entre les valeurs d’une ou de plusieurs propriétés, la transition va se faire dans les deux sens :

1. A partir de la valeur de départ vers la valeur d’arrivée lors du changement d’état d’un élément ;
2. A partir de la valeur actuelle vers la valeur de départ lorsque l’élément retourne dans son état initial.

Par exemple, si on crée une transition qui doit se déclencher lors du passage de la souris sur un élément, dès que l’on va déplacer notre souris en dehors de l’élément les propriétés concernées par la transition vont reprendre petit à petit leurs valeurs initiales en effectuant une transition inversée vers leurs valeurs initiales plutôt que d’être redéfinie brutalement sur leurs valeurs de départ.

Nous allons pouvoir également pouvoir gérer la transition de retour et notamment la durée de cette transition et son délai. Pour faire cela, nous allons devoir préciser en plus de nos valeurs de transition classiques des valeurs de transition dans l’état qui va déclencher la transition (à l’intérieur d’un :hover par exemple pour une transition qui doit démarre lorsque l’utilisateur passe sa souris sur un élément).

Attention ici : les valeurs précisées dans cet état seront utilisées pour la transition de départ et ce sont les valeurs précisées au départ qui seront utilisées pour la transition de retour. Regardez l’exemple suivant pour bien comprendre :

See the Pen Cours HTML CSS 12.1.8 by Pierre (@pierregiraud) on CodePen.

Ici, on crée une transition sur la couleur de fond et la taille de notre div class="d1" qui doit démarrer lorsqu’un utilisateur passe sa souris sur notre div.

Cette première transition ici va durer 10 secondes et avoir un délai de 0s. Dès que l’utilisateur sort sa souris de l’élément, les valeurs de nos propriétés vont revenir à leur état normal en effectuant une transition de retour. La transition de retour va durer 2 secondes et va démarrer après un délai de 5 secondes.

La relation entre les valeurs et les transitions peut paraitre contre intuitif à priori, donc faites bien attention à bien retenir cela !