Les transitions CSS

La propriété transition est une propriété de comportement.

Elle ne définit ni l’affichage, ni le placement d’un élément sur la page mais la transition de propriétés d’affichage et/ou de placement choisies lors d’un changement de pseudo-classe ou de classe d’un élément.

Une transition de ce type sera déclenchée soit par une action de l’utilisateur directement interceptée par le navigateur (:hover par exemple), soit par un traitement JavaScript (ajout d’une classe par exemple).

La déclaration d’une transition nécessite donc la présence d’au moins deux règles :

La règle définissant les premières propriétés d’affichage et de placement de l’élément, et annonçant des modalités de transition.
La règle définissant les nouvelles propriétés d’affichage et de placement qui seront atteintes à la fin de la transition.

La propriété transition permet d’attribuer globalement quatre valeurs à des propriétés plus fines.

Ces quatre propriétés sont : transition-property, transition-duration, transition-timing-function et transition-delay.

Ainsi, les deux déclarations ci-dessous sont équivalentes :

p { transition: width 2s ease 0s, height 4s linear 1s; }

p {
    transition-property: width, height; 
    transition-duration: 2s, 4s; 
    transition-timing-fonction: ease, linear; 
    transition-delay: 0s, 1s; 
}

Première propriété : transition-property

Cette propriété indique la propriété d’affichage et/ou de placement pour laquelle la transition va s’appliquer. Comme dans l’exemple, il est possible de gérer les transitions sur plusieurs propriétés.

Deuxième propriété : transition-duration

Cette propriété indique la durée de la transition. Autant dire que choisir une valeur nulle revient à ne pas mettre de propriété de transition.

Troisième propriété : transition-timing-fonction

Cette troisième propriété est la plus subtile. c’est elle qui définit le style de la transition. Deux fonctions permettent de lui attribuer des valeurs très précises:

cubic-bezier(x1, y1, x2, y2) : qui permet de décrire la vitesse de la transition au cours de sa durée.
steps(n, [end|start]) : qui permet de fractionner la transition en plusieurs étape.

Néanmoins, il existe quelques mots-clés qui permettent d’attribuer des valeurs singulières des fonctions ci-dessus :

linear : la transition sera linéaire
ease : la transition sera rapide sur le début et ralentie sur la fin.
ease-in : la transition sera lente au début et accélérera jusqu’à la fin.
ease-in-out : La transition sera lente au début et à la fin.
ease-out : La transition sera rapide au début et ralentira jusqu’à la fin.
step-start : La transition commence immédiatement.
step-end : La transifion commence à l’issue de le la première étape (step).

Quatrième propriété : transition-delay :

Par défaut, la transition s’applique dès la survenue de l’événement mais il est possible de différer celle-ci en indiquant un délai au moyen de cette dernière propriété.

Frédéric Misery