Transitions

Podcast CSS – 044: Transitions

Lorsque vous interagissez avec un site Web, vous remarquerez peut-être que de nombreux éléments ont un state. Par exemple, les menus déroulants peuvent être ouverts ou fermés. Les boutons peuvent changer de couleur lorsqu'ils sont sélectionnés ou pointés. Les modales apparaissent et disparaissent.

Par défaut, CSS change instantanément le style de ces états.

Les transitions CSS permettent d'interpoler l'état initial et l'état cible de l'élément. La transition entre les deux améliore l'expérience utilisateur en fournissant une direction visuelle, un soutien et des indices sur la cause et l'effet de l'interaction.

Propriétés de transition

Pour utiliser des transitions en CSS, vous pouvez utiliser les différentes propriétés de transition ou la propriété abrégée transition.

propriété de transition

La propriété transition-property spécifie le ou les styles à transférer.

.my-element {
  transition-property: background-color;
}

La propriété transition-property accepte un ou plusieurs noms de propriété CSS dans une liste d'éléments séparés par une virgule.

Vous pouvez éventuellement utiliser transition-property: all pour indiquer que chaque propriété doit effectuer la transition.

durée-de-transition

La propriété transition-duration permet de définir la durée d'une transition.

transition-duration accepte les unités de temps, en secondes (s) ou en millisecondes (ms), et utilise par défaut 0s.

fonction-chronologie de la transition

Utilisez la propriété transition-timing-function pour varier la vitesse d'une transition CSS au cours du transition-duration.

Par défaut, CSS effectue les transitions de vos éléments à une vitesse constante (transition-timing-function: linear). Les transitions linéaires peuvent toutefois sembler artificielles: en pratique, les objets ont une pondération et ne peuvent pas s'arrêter ni démarrer instantanément. L'introduction ou la fin de la transition peut rendre celle-ci plus vivante et naturelle.

Notre module sur l'animation CSS offre un bon aperçu des fonctions de minutage.

Vous pouvez utiliser les DevTools pour tester différentes fonctions de minutage en temps réel.

délai de transition

Utilisez la propriété transition-delay pour indiquer l'heure à laquelle la transition commencera. Si transition-duration n'est pas spécifié, les transitions commencent instantanément, car la valeur par défaut est 0s. Cette propriété accepte une unité de temps, par exemple les secondes (s) ou les millisecondes (ms).

Cette propriété est utile pour échelonner les transitions, en définissant une valeur transition-delay plus longue pour chaque élément suivant d'un groupe.

transition-delay est également utile pour le débogage. Définir ce délai sur une valeur négative peut lancer une transition plus loin dans la chronologie.

raccourci: transition

Comme la plupart des propriétés CSS, il existe une version abrégée. transition combine transition-property, transition-duration, transition-timing-function et transition-delay.

.longhand {
  transition-property: transform;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;
}

.shorthand {
  transition: transform 300ms ease-in-out 0s;
}

Quels éléments peuvent et ne peuvent pas faire l'objet d'une transition ?

Lorsque vous écrivez du code CSS, vous pouvez spécifier les propriétés qui doivent comporter des transitions animées. Consultez cette liste MDN de propriétés CSS animables.

En général, il n'est possible de transformer des éléments qui peuvent avoir un "état médian" entre leurs états début et final. Par exemple, il est impossible d'ajouter des transitions pour font-family, car on ne sait pas exactement à quoi devrait ressembler "l'état médian" entre serif et monospace. En revanche, il est possible d'ajouter des transitions pour font-size, car son unité est une longueur pouvant être interpolée.

Voici quelques propriétés courantes que vous pouvez modifier.

Transformation

La propriété CSS transform fait l'objet d'une transition courante, car il s'agit d'une propriété accélérée par le GPU qui génère une animation plus fluide et consomme moins de batterie. Cette propriété vous permet de mettre à l'échelle, de faire pivoter, de déplacer ou d'incliner de manière arbitraire un élément.

Consultez la section sur les transformations dans le module "Fonctions".

Couleur

Avant, pendant et après l'interaction, la couleur peut être un excellent indicateur de l'état. Par exemple, un bouton peut changer de couleur si vous le survolez. Ce changement de couleur peut indiquer à l'utilisateur que le bouton est cliquable.

Les propriétés color, background-color et border-color ne sont que quelques exemples d'emplacements où la couleur peut être convertie en cas d'interaction.

Consultez notre module sur les couleurs.

Ombres

Les ombres sont souvent déplacées pour indiquer un changement d'altitude, par exemple à partir de l'attention de l'utilisateur.

Consultez notre module sur les ombres.

Filtres

filter est une propriété CSS performante qui vous permet d'ajouter des effets graphiques à la volée. Passer d'un état filter à un autre peut donner des résultats assez impressionnants.

Consultez notre module sur les filtres.

Déclencheurs de transition

Votre CSS doit inclure un changement d'état et un événement qui déclenche ce changement d'état pour que les transitions CSS soient activées. La pseudo-classe :hover est un exemple typique d'un tel déclencheur. Cette pseudo-classe correspond lorsque l'utilisateur pointe sur un élément avec son curseur.

Vous trouverez ci-dessous une liste de pseudo-classes et d'événements pouvant déclencher des changements d'état dans vos éléments.

• :hover: établit une correspondance si le curseur est placé sur l'élément.
• :focus: établit une correspondance si l'élément est sélectionné.
• :focus-within : établit une correspondance si l'élément ou l'un de ses descendants est sélectionné.
• :target: établit une correspondance lorsque le fragment de l'URL actuelle correspond à l'ID de l'élément.
• :active: établit une correspondance lorsque l'élément est en cours d'activation (généralement lorsque l'utilisateur appuie dessus).
• Changement de class par rapport à JavaScript: lorsque le class CSS d'un élément est modifié via JavaScript, CSS effectue la transition des propriétés éligibles qui ont été modifiées.

Différentes transitions pour l'entrée et la sortie

En définissant différentes propriétés transition lors du survol/mise au point, il est possible de créer des effets intéressants.

.my-element {
  background: red;

  /* This transition is applied on the "exit" transition */
  transition: background 2000ms ease-in;
}

.my-element:hover {
  background: blue;

  /* This transition is applied on the "enter" transition */
  transition: background 150ms ease;
}

Considérations relatives à l’accessibilité

Les transitions CSS ne conviennent pas à tout le monde. Pour certaines personnes, les transitions et les animations peuvent provoquer le mal des transports ou une gêne. Heureusement, CSS dispose d'une fonctionnalité multimédia appelée prefers-reduced-motion, qui détecte si un utilisateur a indiqué qu'il préférait moins de mouvements depuis son appareil.

/*
  If the user has expressed their preference for
  reduced motion, then don't use transitions.
*/
@media (prefers-reduced-motion: reduce) {
  .my-element {
    transition: none;
  }
}

/*
  If the browser understands the media query and the user
  explicitly hasn't set a preference, then use transitions.
*/
@media (prefers-reduced-motion: no-preference) {
  .my-element {
    transition: transform 250ms ease;
  }
}

Pour en savoir plus sur cette fonctionnalité multimédia, consultez notre article de blog : prefers-reduced-motion : il faut parfois limiter le mouvement.

Considérations sur les performances

Lorsque vous utilisez des transitions CSS, vous pouvez rencontrer des problèmes de performances si vous ajoutez des transitions pour certaines propriétés CSS. Par exemple, lorsque des propriétés telles que width ou height changent, le contenu est déplacé sur le reste de la page. Cela oblige le CSS à calculer de nouvelles positions pour chaque élément concerné, pour chaque image de la transition. Dans la mesure du possible, nous vous recommandons d'utiliser plutôt des propriétés comme transform et opacity.

Pour en savoir plus à ce sujet, consultez notre guide sur les animations CSS hautes performances.

Testez vos connaissances

Tester vos connaissances sur les transitions