Transitions CSS

Une transition CSS permet de faire évoluer une propriété progressivement au lieu de voir un changement brutal. Dans ce cours, nous allons avancer pas à pas pour comprendre ce mécanisme et apprendre à contrôler précisément ce qui change, à quelle vitesse et à quel moment.

À quoi sert une transition ?

Sans transition, lorsqu'un état change, le navigateur applique immédiatement la nouvelle valeur CSS.

Avec une transition, le navigateur interpole progressivement entre l'ancienne valeur et la nouvelle. Le passage devient plus doux et plus lisible.

On utilise souvent les transitions pour un survol de lien, un bouton, une carte, une image ou n'importe quel élément qui réagit à une interaction.

En pratique, une transition sert surtout à rendre un changement plus fluide. Elle ne crée pas un nouvel état toute seule : elle accompagne simplement le passage d'un état CSS à un autre.

						
							<div class="demo demo-sans-transition">
								<a href="#" class="bouton-transition">Survoler</a>
							</div>
						
					

						
							.bouton-transition{
								display: inline-block;
								padding: 12px 18px;
								border-radius: 4px;
								background: #00a7c0;
								color: white;
								text-decoration: none;
							}

							.demo-sans-transition:hover .bouton-transition{
								background: #e6266d;
							}
						
					

Dans ce premier exemple, la couleur change d'un seul coup. C'est fonctionnel, mais l'effet reste assez sec.

Si l'on ajoute maintenant une transition, le passage entre les deux couleurs devient progressif.

transition-property pour cibler les propriétés CSS

La propriété transition-property sert à indiquer quelle propriété CSS doit être animée.

C'est important, car toutes les propriétés ne changent pas forcément en même temps. Vous pouvez choisir de ne faire évoluer que la couleur, ou seulement la largeur, ou encore plusieurs propriétés à la fois.

				
					.bouton{
						transition-property: background-color;
					}
				
			

Ici, seule la propriété background-color sera concernée par la transition.

transition-duration pour définir une durée

La propriété transition-duration définit combien de temps la transition doit durer.

Elle s'exprime généralement en secondes avec s, ou en millisecondes avec ms.

				
					.bouton{
						transition-property: background-color;
						transition-duration: 0.4s;
					}
				
			

Plus la durée est courte, plus l'effet paraît nerveux. Plus elle est longue, plus l'effet paraît lent.

Au survol, la couleur met 0,4 seconde à changer.

transition-timing-function pour définir une courbe d'accélération

Une transition ne se contente pas d'avoir une durée. Elle peut aussi accélérer ou ralentir selon une courbe. C'est le rôle de transition-timing-function.

Les valeurs les plus courantes sont linear, ease, ease-in, ease-out et ease-in-out.

• linear avance à vitesse constante.
• ease démarre doucement, accélère, puis ralentit à la fin.
• ease-in démarre lentement.
• ease-out termine lentement.
• ease-in-out combine un démarrage et une fin plus doux.

				
					.bouton{
						transition-property: background-color;
						transition-duration: 0.4s;
						transition-timing-function: ease-out;
					}
				
			

La durée reste la même, mais la sensation visuelle change. C'est souvent ce détail qui rend une interface plus agréable.

transition-delay pour définir un délai de déclenchement

La propriété transition-delay ajoute un temps d'attente avant le début de la transition.

Autrement dit, le changement n'est pas lancé immédiatement quand l'état CSS se modifie.

				
					.bouton{
						transition-property: background-color;
						transition-duration: 0.4s;
						transition-delay: 0.2s;
					}
				
			

Ce délai peut être utile, mais il faut l'utiliser avec mesure. Sur une interface classique, un délai trop visible donne souvent une impression de lourdeur.

Ici, le bouton attend un peu avant de se déplacer.

transition pour combiner toutes les propriétés en une seule ligne CSS

Dans la pratique, on utilise très souvent la propriété raccourcie transition. Elle permet d'écrire en une seule ligne la propriété visée, la durée, la courbe et le délai.

				
					.bouton{
						transition: background-color 0.4s ease 0s;
					}
				
			

Vous pouvez même enchaîner plusieurs transitions séparées par des virgules si plusieurs propriétés doivent évoluer différemment.

						
							<a href="#" class="carte-transition">Voir le détail</a>
						
					

						
							.carte-transition{
								background: #f3f8fa;
								color: #075d6a;
								transform: translateY(0);
								transition: background-color 0.3s ease,
											transform 0.3s ease;
							}

							.carte-transition:hover{
								background: #dff3f8;
								transform: translateY(-4px);
							}
						
					

Différence entre une transition et une animation

Une transition CSS a besoin d'un changement d'état pour se déclencher. Par exemple, un survol, un focus, une classe ajoutée avec JavaScript ou une variation de largeur.

Une animation CSS fonctionne autrement. Elle peut démarrer toute seule et suivre plusieurs étapes définies avec des @keyframes.

En résumé, la transition est parfaite pour accompagner un passage d'un état A vers un état B, alors que l'animation est préférable pour créer une séquence plus riche, plus autonome ou répétée.