transition vs animation
transition anime le changement entre deux états après un déclencheur, par ex. :hover. animation rejoue les étapes de @keyframes toute seule, même en boucle.
Comparaison point par point
#Nécessite un déclencheur (par ex. :hover)
- transition
- Oui, sans changement d’état il ne se passe rien
- animation
- Non, elle démarre seule une fois la règle assignée
Nombre d’étapes
- transition
- Deux états : initial et final
- animation
- Autant que vous voulez, définies dans
@keyframes
Mise en boucle
- transition
- Impossible
- animation
- Oui, via
animation-iteration-count: infinite
Démarrage sans interaction de l’utilisateur
- transition
- Non
- animation
- Oui
Pause et reprise
- transition
- Non
- animation
- Oui, via
animation-play-state
Utilisation typique
- transition
- Survol sur des boutons, ouverture fluide d’un menu
- animation
- Indicateurs de chargement, pulsation, témoins de progression
Exemple
#.btn {
background: #7c3aed;
transition: background-color 0.2s;
}
.btn:hover {
background: #6d28d9;
}
.spinner {
animation: spin 1s linear infinite;
}
@keyframes spin {
to { rotate: 360deg; }
}<div class="stage" style="display: flex; gap: 16px; align-items: center;">
<button class="btn" type="button" style="padding: 8px 16px; border: 0; border-radius: 8px; color: #fff;">Survolez-moi</button>
<div class="spinner" style="width: 28px; height: 28px; border: 3px solid #333; border-top-color: #a78bfa; border-radius: 50%;"></div>
</div>Définition et utilisation
#La propriété transition a besoin d’un déclencheur : un changement d’état, par exemple :hover, l’ajout d’une classe par JavaScript, ou un changement de requête @media. Elle interpole seulement entre deux valeurs, celle d’avant le changement et celle d’après, et se joue une fois à chaque changement.
La propriété animation repose sur la règle @keyframes, où vous décrivez autant d’étapes que vous voulez, à différents pourcentages du temps. Elle démarre seule, dès que la règle est assignée à l’élément, sans aucune interaction de l’utilisateur. Grâce à animation-iteration-count, elle peut se répéter en boucle, et animation-direction ainsi que animation-play-state donnent le contrôle sur le sens et la pause.
En pratique, transition suffit pour des effets d’interface simples : surbrillance d’un bouton, ouverture d’un menu, changement de couleur au focus. animation convient là où le mouvement doit se produire tout seul et sans fin : indicateurs de chargement, badges qui pulsent, effets d’entrée des éléments sur la page.
Syntaxe
#transition: <propriété> <durée> <fonction de temporisation>? <délai>?;
animation: <nom-des-images-clés> <durée> <fonction de temporisation>? <délai>? <répétitions>?;Plus d’exemples
#@keyframes pulse {
50% { transform: scale(1.15); }
}
.badge {
animation: pulse 1.2s ease-in-out infinite;
}<span class="box badge" style="display: inline-grid;">Nouveau</span>Rien à cliquer ni à survoler : l’animation démarre dès le chargement de la page.
.card {
transform: scale(1);
transition: transform 0.3s;
}<div class="box" style="width: 220px;">Attend un changement d’état, par ex. :hover</div>transition seul n’anime rien. Il lui faut une autre règle, par ex. :hover, qui change la valeur de transform.
Bonnes pratiques
#- Si quelque chose doit se produire sans l’utilisateur et en boucle, utilisez
animation. transitionest plus simple et plus léger pour des effets de survol ou de focus sur une ou deux propriétés.- Vous pouvez les combiner : une animation d’entrée avec
@keyframes, puis unetransitionsur:hoverdu même élément.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.