La transition en CSS est un effet qui vous permet de changer lentement les valeurs des propriétés CSS au lieu de changer soudainement. Cela peut rendre vos pages Web plus interactives et attrayantes. Voici comment utiliser l’effet de transition en CSS:
1. Propriété de transition: La propriété de transition en CSS est une propriété de raccourci pour quatre autres propriétés: transition-property, transition-duration, transition-timing-function et transition-delay. Vous pouvez les utiliser ensemble de cette manière:
```
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 2s, background 2s;
}
```
Dans l’exemple ci-dessus, lorsque la souris survole le div, sa largeur, sa hauteur et sa couleur d’arrière-plan changent progressivement sur une période de 2 secondes.
1. Transition-property: Cette propriété spécifie le nom de la propriété CSS à laquelle s’applique la transition.
```
div {
transition-property: width;
}
```
1. Transition-duration: Cette propriété spécifie combien de temps dure la transition.
```
div {
transition-duration: 2s;
}
```
1. Transition-timing-function: Cette propriété spécifie la vitesse de la transition.
```
div {
transition-timing-function: linear;
}
```
1. Transition-delay: Cette propriété spécifie combien de temps attendre avant que la transition commence.
```
div {
transition-delay: 1s;
}
```
Notez que pour voir l’effet de ces changements, vous devez changer les valeurs des propriétés en quelque sorte, généralement en utilisant un pseudo-élément comme `:hover` ou `:focus`. Par exemple:
```
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover {
width: 200px;
}
```
Maintenant, lorsque vous survolez ce div, sa largeur augmentera progressivement à 200px sur une période de 2 secondes.
