Parfois, il est nécessaire de créer des animations pour les changements d’éléments sur une page web en contrôlant des facteurs tels que la vitesse, le temps de délai et la durée. Dans ces situations, la propriété transition peut être utilisée pour accomplir cette tâche.

L’élément possède toujours deux états : initial et final. Il est possible de contrôler le comportement du changement d’élément à l’aide des propriétés suivantes :

transition-property: 
transition-duration:  
transition-timing-function: 
transition-delay: 

• transition-property – Le nom de la propriété CSS à animer ;
• transition-duration – La durée pendant laquelle l’état de l’élément doit changer. Elle s’exprime en secondes (s) ou millisecondes (ms) ;
• transition-timing-function – Définit la courbe de vitesse de l’effet de transition. Les valeurs typiques sont ease, linear, ease-in, ease-out et ease-in-out ;
• transition-delay – Le délai avant le début de l’effet de transition. Il s’exprime en secondes (s) ou millisecondes (ms).

Chaque propriété sera étudiée plus en détail dans ce cours.

Remarque

1 seconde = 1000 millisecondes. Donc :

• 0.1s = 100ms ;
• 2.5s = 2500ms ;
• 0.5s = 500ms.

Pratique

Par exemple, nous souhaitons ajouter un effet de transition à la couleur d’arrière-plan de l’élément div lors du survol. Notre objectif est :

• Modifier la propriété background-color ;
• Le délai doit être de 0.1 seconde ;
• Le changement de couleur doit durer 0.3 seconde ;
• Pour la timing-function, la valeur attendue est ease-in-out, ce qui signifie que la transition commence lentement, accélère au milieu, puis ralentit à la fin.

Survolez l’élément à l’aide du curseur pour voir le résultat.

Nous avons spécifié toutes les propriétés liées à la transition sur l’élément div, puis, pour le hover, nous avons défini uniquement la décoration que nous souhaitions voir.