Les transitions en CSS

Les transitions permettent d’animer en douceur le passage d’un état à un autre. Elles s’appliquent lorsqu’une propriété change, par exemple au survol d’un élément.

1. Propriété transition-property

Indique quelle propriété sera animée (ex: width, background-color, transform…).

Exemple :
transition-property: background-color;
    

2. Propriété transition-duration

Définit la durée de la transition (ex: 0.3s, 1s…).

Exemple :
transition-duration: 0.5s;
    

3. Propriété transition-timing-function

Contrôle la vitesse de l’animation (accélération, décélération…). Les valeurs les plus courantes sont :

• ease (par défaut)
• linear
• ease-in
• ease-out
• ease-in-out

Exemple :
transition-timing-function: ease-in-out;
    

4. Propriété transition-delay

Ajoute un délai avant le début de la transition.

Exemple :
transition-delay: 0.2s;
    

5. La forme raccourcie transition

On peut tout regrouper en une seule ligne :

transition: background-color 0.5s ease-in-out 0.2s;
    

6. Exemple simple complet

Voici un exemple conceptuel (sans CSS ici, juste pour comprendre la logique) :

/* État normal */
.mon-bouton {
    background-color: blue;
    transition: background-color 0.3s ease;
}

/* État au survol */
.mon-bouton:hover {
    background-color: red;
}
    

Résultat : lorsque la souris survole le bouton, sa couleur passe de bleu à rouge en douceur.

7. Propriétés couramment animées

• Couleurs : color, background-color
• Dimensions : width, height
• Opacité : opacity
• Position : left, top
• Transformations : transform

8. Exemple avec plusieurs propriétés

transition: width 0.4s ease, opacity 0.6s linear;