Transitions et animations simples
9 min · Avancé · 7 août 2026
Adoucir un changement d’état
css
.bouton {
background-color: navy;
transition: background-color 0.3s;
}
.bouton:hover {
background-color: royalblue;
}La transition ne déclenche rien seule : c’est :hover qui change la couleur, transition se contente d’étaler ce changement sur 0,3 seconde plutôt que de le rendre instantané.
Astuce
transition: all 0.3s; applique cet adoucissement à toutes les propriétés qui changent, pratique mais moins précis que cibler une propriété exacte comme background-color.
Une animation autonome, avec @keyframes
css
@keyframes apparition {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: apparition 0.5s;
}Contrairement à une transition, cette animation démarre seule au chargement, sans attendre un :hover ou tout autre déclencheur.
À toi de jouer
Ajoute une transition sur .bouton : la propriété background-color doit s’animer sur une durée de 0.3s.
html
<!-- HTML -->
<button class="bouton">Survole-moi</button>
/* CSS */
.bouton {
/* Ajoute ta transition ici */
}