Transition CSS

Une transition CSS anime en douceur le changement d'une propriété, d'une valeur à une autre, sur une durée donnée plutôt que de basculer instantanément. C'est la façon la plus simple d'ajouter du mouvement à une interface, le plus souvent lors d'un changement d'état comme un survol, un focus ou un changement de classe.

Les quatre propriétés de transition

Une transition se contrôle avec quatre réglages, souvent écrits ensemble dans le raccourci transition, par exemple transition: background-color 200ms ease-in-out 0s;.

Ce que l'on peut animer

Seules les propriétés animables se transitionnent. Les couleurs, opacity, transform, les dimensions et les positions fonctionnent ; les propriétés discrètes comme display non (même si le CSS moderne commence à le permettre). Animer transform et opacity est le plus fluide car le navigateur peut les déléguer au GPU.

Transition ou animation

Une transition anime un seul changement entre deux états et a besoin d'un déclencheur, comme un survol. Une animation CSS utilise des keyframes, peut définir de nombreuses étapes et se lancer seule ou boucler. On utilise une transition pour de simples effets de survol et de focus, et une animation pour un mouvement en plusieurs étapes ou automatique.

Les fonctions de temporisation

La fonction de temporisation façonne l'accélération du changement. ease démarre et finit en douceur, linear est constante, et une courbe cubic-bezier() personnalisée donne un contrôle total. Gardez des durées courtes, environ 150 à 300 millisecondes, pour que l'interface reste réactive plutôt que lente.

Bonnes pratiques

Nommez les propriétés exactes au lieu d'utiliser transition: all, qui peut animer des changements involontaires et nuire à la performance. Associez les transitions à un état de survol ou de focus clair, et respectez prefers-reduced-motion pour les personnes sensibles au mouvement.

Les transitions CSS chez BeBranded

Chez BeBranded, nous utilisons les transitions pour un retour visuel net et discret sur les boutons, liens et cartes, afin qu'une interface paraisse vivante sans distraire. Cela fait partie du front-end soigné et performant que nous livrons via notre travail de design.