LES TRANSITIONS CSS
Donnez vie à vos interfaces web
INTRODUCTION
Les transitions CSS permettent de créer des animations fluides et élégantes lorsqu'une
propriété CSS change. Au lieu d'un changement brutal et instantané, les transitions
créent un effet de progression graduelle qui améliore considérablement l'expérience
utilisateur.
Les transitions rendent les sites web plus vivants, plus agréables à utiliser et plus
professionnels. Elles donnent un feedback visuel à l'utilisateur et rendent la navigation
plus intuitive.
LES ÉTATS INTERACTIFS
1. :hover (Survol)
Le pseudo-sélecteur :hover s'active lorsque l'utilisateur survole un élément avec sa
souris. C'est l'état interactif le plus utilisé pour améliorer la navigation et donner du
feedback visuel.
Syntaxe :
.mon-element {
background-color: blue;
}
.mon-element:hover {
background-color: red;
}
Utilisation courante :
• Changer la couleur des boutons
• Agrandir des images
• Souligner des liens
• Afficher des informations supplémentaires
2. :focus (Focus)
Le pseudo-sélecteur :focus s'applique aux éléments qui reçoivent le focus,
généralement les champs de formulaire lorsqu'on clique dedans ou qu'on y navigue
avec la touche Tab.
Syntaxe :
input:focus {
border: 2px solid blue;
border-radius: 10px;
outline: none;
}
Utilisation courante :
• Mettre en évidence les champs de formulaire actifs
• Améliorer l'accessibilité
• Guider l'utilisateur dans la saisie
Important : Ne supprimez jamais complètement l'outline sans ajouter un autre
indicateur visuel, car c'est essentiel pour l'accessibilité.
3. :active (Actif/Cliqué)
Le pseudo-sélecteur :active s'active au moment précis où l'utilisateur clique sur un
élément. L'effet dure tant que le bouton de la souris reste enfoncé.
Syntaxe :
.bouton {
background-color: blue;
}
.bouton:active {
background-color: darkblue;
transform: scale(0.95);
}
Utilisation courante :
• Créer un effet de "bouton enfoncé"
• Donner un feedback immédiat au clic
• Créer des animations déclenchées au clic
LA PROPRIÉTÉ TRANSITION
La propriété transition permet de définir comment un élément passe d'un état à un
autre. Elle se place sur l'élément dans son état normal (pas dans le :hover, :focus ou
:active).
Syntaxe de base
.element {
transition: durée;
}
/* Exemple */
.element {
background-color: blue;
transition: 2s; /* Transition de 2 secondes */
}
.element:hover {
background-color: red;
}
RÈGLE D'OR : La propriété transition doit TOUJOURS être placée dans le sélecteur
de base, PAS dans le :hover, :focus ou :active !
Syntaxe complète
transition: propriété durée timing-function délai;
/* Exemples */
transition: all 2s ease-in-out 0s;
transition: background-color 1s;
transition: transform 0.5s ease;
LES PROPRIÉTÉS DE TRANSITION
1. transition-property
Spécifie quelle propriété CSS doit être animée.
Valeurs possibles :
• all : anime toutes les propriétés (par défaut)
• background-color : anime uniquement la couleur de fond
• width : anime uniquement la largeur
• etc.
Exemple :
transition-property: background-color;
2. transition-duration
Définit la durée de la transition.
Unités :
• s : secondes (ex: 2s)
• ms : millisecondes (ex: 500ms)
Exemple :
transition-duration: 2s;
transition-duration: 500ms;
3. transition-timing-function
Contrôle la vitesse de la transition au fil du temps (courbe d'accélération).
Valeurs principales :
Fonction Description Effet
Commence lentement, accélère, puis
ease Par défaut
ralentit
Vitesse
linear Même vitesse du début à la fin
constante
ease-in Accélération Commence lentement puis accélère
ease-out Décélération Commence vite puis ralentit
Lent au début, rapide au milieu, lent à la
ease-in-out Les deux
fin
Exemple :
.element {
transition: 3s;
transition-timing-function: ease-in-out;
}
Astuce : ease-in-out est souvent le meilleur choix pour des animations naturelles et
agréables.
4. transition-delay
Définit un délai avant le début de la transition.
Exemple :
transition-delay: 1s; /* Attend 1 seconde avant de démarrer */
PROPRIÉTÉS ANIMABLES
Toutes les propriétés CSS ne peuvent pas être animées. Voici les catégories principales
:
Dimensions
• width, height
• padding, margin
• max-width, min-height
Couleurs
• background-color
• color
• border-color
Bordures
• border-width
• border-radius
Transformations
• transform (rotate, scale, translate, skew)
Opacité et visibilité
• opacity
Positionnement
• top, left, right, bottom
Propriétés NON-animables :
• display
• position (static, relative, absolute)
• font-family
EXEMPLES PRATIQUES
Exemple 1 : Changement de couleur progressif
.bouton {
background-color: blue;
padding: 10px 20px;
color: white;
transition: background-color 1s;
}
.bouton:hover {
background-color: red;
}
Résultat : Quand on survole le bouton, il passe du bleu au rouge en 1 seconde.
Exemple 2 : Agrandissement d'une image
.image {
width: 200px;
height: 200px;
transition: all 0.3s ease;
}
.image:hover {
width: 250px;
height: 250px;
}
Résultat : L'image s'agrandit de 200px à 250px en 0.3 secondes au survol.
Exemple 3 : Rotation et changement de forme
.carre {
width: 100px;
height: 100px;
background-color: purple;
transition: all 0.5s ease;
}
.carre:hover {
transform: rotate(45deg);
border-radius: 50%;
background-color: orange;
}
Résultat : Le carré tourne de 45°, devient un cercle et change de couleur.
Exemple 4 : Déplacement à l'active
.boite {
width: 100px;
height: 100px;
background-color: green;
transition: 2s ease-in-out;
}
.boite:active {
margin-left: 300px;
}
Résultat : Quand on clique sur la boîte, elle se déplace de 300px vers la droite.
Exemple 5 : Interaction Parent-Enfant
.parent {
width: 200px;
height: 200px;
background-color: blue;
}
.enfant {
width: 50px;
height: 50px;
background-color: lightblue;
transition: 2s;
}
.parent:active .enfant {
background-color: red;
width: 100px;
height: 100px;
}
Résultat : Quand on clique sur le parent, l'enfant change de couleur et s'agrandit.
Astuce : Pour affecter un élément enfant lors d'une action sur le parent, utilisez la
syntaxe .parent:hover .enfant ou .parent:active .enfant
BONNES PRATIQUES
Durée des transitions
• Interactions courantes (boutons, liens) : 0.2s - 0.3s
• Animations moyennes (cartes, modales) : 0.3s - 0.5s
• Animations longues (effets spéciaux) : 0.5s - 1s
• Évitez les transitions > 1s (frustrent l'utilisateur)
Choix de la timing-function
• ease-in-out : animations naturelles (recommandé)
• ease : par défaut, bon compromis
• linear : mouvements mécaniques
• ease-in : éléments qui disparaissent
• ease-out : éléments qui apparaissent
Optimisation
• Utilisez transform plutôt que left/top (plus performant)
• Utilisez opacity plutôt que display (animable)
• Testez sur mobile (les transitions peuvent ralentir)
• N'animez pas trop d'éléments en même temps
Accessibilité
• Pensez aux utilisateurs qui préfèrent réduire les animations
• Gardez toujours un indicateur de focus visible
• Ne comptez pas uniquement sur la couleur pour transmettre l'information
ERREURS COURANTES À ÉVITER
Erreur 1 : Placer la transition au mauvais endroit
INCORRECT :
.element:hover {
background-color: red;
transition: 2s; /* MAUVAIS ENDROIT ! */
}
XORRECT :
.element {
background-color: blue;
transition: 2s; /* BON ENDROIT ! */
}
.element:hover {
background-color: red;
}
Erreur 2 : Oublier les unités
INCORRECT :
transition: 2; /* Manque l'unité */
CORRECT :
transition: 2s; /* Avec l'unité */
Erreur 3 : Essayer d'animer des propriétés non-animables
INCORRECT :
.element {
display: none;
transition: display 2s; /* display n'est pas animable */
}
.element:hover {
display: block;
}
CORRECT :
.element {
opacity: 0;
transition: opacity 2s;
}
.element:hover {
opacity: 1;
}
Erreur 4 : Transitions trop longues
INCORRECT :
transition: 5s; /* Trop long, frustre l'utilisateur */
CORRECT :
transition: 0.3s; /* Court et efficace */
Erreur 5 : Ne pas tester l'effet de retour
Pensez toujours à tester ce qui se passe quand :
• La souris quitte l'élément (après un :hover)
• Le focus est perdu (après un :focus)
• Le clic est relâché (après un :active)
La transition doit être fluide dans les deux sens !