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 ...

principe

Six points sont à prendre en compte pour définir une transition

1. les éléments qui subiront la transition
2. la propriété concernée par la transition
3. l'interaction utilisateur provoquant la transition
4. la valeur initiale de la propriété
5. la valeur finale de la propriété
6. la durée de la transition

technique

On souhaite appliquer une transition de la couleur de fond ₍₂₎ à un élément div#exemple ₍₁₎. Le fond de l'élément initialement rouge ₍₄₎ devra passer au jaune ₍₅₎ en deux secondes ₍₆₎ lors du survol ₍₃₎

paramètres d'une transition

Les paramètres caratésrisant une transition sont les suivants :

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

transition-property

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.

transition-duration

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.

transition-dealy

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.

transition-timing function

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 :

• linear : vitesse constante
• ease : lent rapide lent
• ease-in : lent rapide
• ease-out : rapide lent
• ease-in-out : lent rapide lent
• cubic-bezier(a,b,c,d) : personnalisation (outil en ligne)

compatibilité

Afin d'assurer une meilleure compatibilité, on utilisera les versions dédiées à chaque navigateurs :

• -moz-transition-property, -moz-transition-duration, -moz-transition-delay, -moz-transition-timing-function (Firefox)
• -webkit-transition-property, -webkit-transition-duration, -webkit-transition-delay, -webkit-transition-timing-function(Safari et Chrome)
• -o-transition-property, -o-transition-duration, -o-transition-delay, -o-transition-timing-function (Opéra)
• -ms-transition-property, -ms-transition-duration, -ms-transition-delay, -ms-transition-timing-function (Explorer)