Transition

Un bouton qui change de couleur brutalement au survol paraît toujours un peu cassant ; le même changement étalé sur 200 millisecondes semble naturel. C’est tout l’intérêt de transition : elle indique au navigateur quelle(s) propriété(s) animer, sur quelle durée, avec quelle courbe de vitesse (ease, linear, cubic-bezier()) et après quel délai éventuel, sans qu’il soit nécessaire de décrire les images intermédiaires comme le ferait une animation.

Usage dans WordPress

Les thèmes de blocs modernes appliquent des transitions légères sur les liens de navigation, les boutons et les images au survol, souvent définies directement dans la feuille de style générée à partir de theme.json ou ajoutées via un CSS personnalisé au niveau du site ou d’un bloc. Certains blocs interactifs construits avec l’API d’interactivité s’appuient aussi sur des transitions CSS pour les ouvertures de menu ou d’accordéon, plutôt que sur de l’animation pilotée en JavaScript.

Exemple

.wp-block-button__link {
  background-color: #1d4ed8;
  transition: background-color 0.2s ease-in-out;
}
.wp-block-button__link:hover {
  background-color: #1e3a8a;
}

Pièges fréquents

• Animer width, height ou top/left déclenche des recalculs de mise en page coûteux ; préférer transform et opacity, bien plus légers pour le navigateur.
• Une transition sur all anime aussi des propriétés qu’on n’avait pas anticipées, ce qui peut ralentir le rendu ou créer des effets visuels indésirables ; cibler les propriétés précises est plus sûr.
• Ne pas oublier prefers-reduced-motion : certains visiteurs demandent explicitement à réduire les animations, et un thème accessible doit en tenir compte.