CSS — Transitions

Accompagnez le passage d’une valeur CSS à une autre avec une transition. Choisissez les propriétés concernées, des durées adaptées et une variante à mouvements réduits qui conserve le changement d’état.

Une transition CSS calcule les valeurs intermédiaires entre l’ancienne et la nouvelle valeur d’une propriété. Nommez les propriétés concernées et gardez des durées courtes pour les retours d’interface. Le résultat doit rester compréhensible lorsque les mouvements sont réduits. Le survol et :focus-within peuvent déclencher un changement ; prévoyez aussi des repères d’état qui restent visibles sans animation.

Durée, délai et courbe de progression

Une écriture courante du raccourci suit l’ordre propriété, durée, fonction de progression, puis délai. Séparez les transitions par des virgules pour animer plusieurs propriétés. Une courbe comme ease-out convient souvent à un retour d’interface ; choisissez-la selon l’effet attendu plutôt que d’utiliser systématiquement une vitesse linéaire. Vérifiez aussi qu’une transition interrompue ne donne pas l’impression que le contrôle est bloqué.

.card {
  transition: translate 160ms ease, border-color 160ms ease;
}
.card:is(:hover, :focus-within) {
  translate: 0 -0.25rem;
  border-color: #174986;
}

Concevoir la variante à mouvements réduits

prefers-reduced-motion exprime une préférence pour limiter les mouvements non essentiels, tout en conservant le résultat. Désactivez les transitions concernées et gardez le changement de bordure ou de couleur. Désactivez aussi les déplacements pour chaque état qui les déclenche, y compris :focus-within si vous l’utilisez. Ciblez le composant plutôt que d’imposer partout des durées minuscules avec !important, qui peuvent perturber les événements d’animation d’autres composants.