Le CSS transition est une fonctionnalité qui permet d'animer la transition entre deux états d'un élément HTML. Lorsque vous modifiez une propriété CSS (comme la couleur, la taille, la position, etc.) d'un élément, vous pouvez utiliser une transition pour rendre la modification plus fluide et plus agréable visuellement.
Pour utiliser une transition en CSS, vous devez d'abord définir la propriété que vous voulez animer. Vous pouvez ensuite spécifier une durée pour l'animation (par exemple, 1 seconde), ainsi qu'une fonction de temporisation qui détermine comment l'animation doit progresser (par exemple, linéaire ou accélérée). Vous pouvez également définir une propriété de retard pour retarder le début de l'animation.
Notez que les valeurs de la propriété "transition" peuvent être dispersés à travers des sous-propriétés, ainsi, transition est un racourci pour le cumul des propriétés transition-property, transition-timing-function, transition-duration, transition-delay et transition-property
.box {
background-color: blue;
transition: background-color 1s linear;
}
.box:hover {
background-color: red;
}
Dans cet exemple, la propriété "background-color" est définie avec une transition de 1 seconde avec une fonction de temporisation linéaire. Lorsque l'utilisateur survole l'élément avec la souris, la couleur de fond passe de bleu à rouge avec une transition fluide de 1 seconde.
La plupart des propriétés CSS peuvent utiliser les transitions, mais vous allez souvent utiliser les propriétés suivantes
Là encore, et surtout au niveau de la "timing function", il sera souvent difficile de visualiser l'effet que la fonction donnera. Divers outils peuvent vous aider :