Les transitions permettent de faire varier la valeur d'une propriété CSS prenant ses valeurs dans un domaine continue (dimension, couleur) de fac¸on progressive
On applique généralement une transition lors d'une interaction avec l'utilisateur : survol de la souris, clic souris ...
Six points sont à prendre en compte pour définir une transition
On souhaite appliquer une transition de la couleur de fond (2) à un élément div#exemple (1). Le fond de l'élément initialement rouge (4) devra passer au jaune (5) en deux secondes (6) lors du survol (3)
Les paramètres caratésrisant une transition sont les suivants :
Permet de définir la propriété dont la valeur varie lors de la transition. Toute propriété CSS dont la valeur appartient à un domaine continu (dimension, couleur) peut faire l'objet d'une transition.
La propriété transition-duration détermine la durée de la transition. Par défaut elle vaut 0s, auquel cas il n'y a donc pas de transition.
La propriété transition-delay détermine le délai d'aatente avant le début de la transition. Par défaut il vaut 0s.
La propriété transition-timing function détermine la vitesse de tra,sition au cours du temps
Cette propriété peut prendre les valeurs suivantes :
Afin d'assurer une meilleure compatibilité, on utilisera les versions dédiées à chaque navigateurs :