Qu'est-ce Qu'une Transition ?

Parfois, nous devons créer des animations pour les changements d'éléments sur une page web avec des facteurs de contrôle tels que la vitesse, le temps de retard et la durée. Dans de tels cas, la propriété transition peut être utilisée pour accomplir cette tâche.

L'élément a toujours deux états : initial et final. Nous pouvons contrôler le comportement du changement d'élément à l'aide des propriétés suivantes :

• transition-property - Le nom de la propriété CSS que nous devons animer ;
• transition-duration - Le temps pendant lequel nous devons changer l'état de l'élément. Il est spécifié en secondes (s) ou millisecondes (ms) ;
• transition-timing-function - Elle spécifie 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 est spécifié en secondes (s) ou millisecondes (ms).

Nous examinerons chaque propriété 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 voulons ajouter un effet de transition à la couleur de fond de l'élément div lorsqu'il est survolé. Notre tâche est :

• Changer la propriété background-color ;
• Le délai doit être de 0.1 secondes ;
• Le changement de couleur doit durer 0.3 secondes ;
• Pour la timing-function, nous attendons la valeur ease-in-out, ce qui signifie qu'il commencera lentement, accélérera au milieu, puis ralentira à nouveau à la fin.

Survolez l'élément avec l'aide du curseur pour voir le résultat.

Nous avons spécifié toutes les propriétés liées à la transition pour l'élément div et ensuite pour le hover, nous avons défini uniquement la décoration que nous souhaitons voir.