Transitions

Podcast CSS – 044: Transitions

Lorsque vous interagissez avec un site Web, vous remarquerez peut-être que de nombreux éléments ont un état. 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 survolés. Les modales apparaissent et disparaissent.

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

Les transitions CSS nous permettent d'interpoler l'état initial à 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 indications sur la cause et l’effet de l’interaction.

Propriétés de transition

Pour utiliser des transitions dans 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 auxquels appliquer la transition.

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

transition-property accepte un ou plusieurs noms de propriétés 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 une transition.

transition-duration

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 est défini par défaut sur 0s.

transition-timing-function

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

Par défaut, CSS effectue une transition de vos éléments à une vitesse constante (transition-timing-function: linear). Toutefois, les transitions linéaires peuvent paraître artificielles: dans la vraie vie, les objets ont du poids et ne peuvent pas s'arrêter et démarrer instantanément. Le fait de faciliter l'entrée ou la fin d'une transition peut rendre celle-ci plus dynamique et naturelle.

Notre module sur les animations CSS présente bien les fonctions de minutage.

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

délai-de-transition

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

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

transition-delay est également utile pour le débogage. Définir le 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;
}

Qu'est-ce qui peut et ne peut pas être migré ?

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 des propriétés CSS animables.

En général, il n'est possible de passer que des éléments dont l'état peut être "intermédiaire" entre leurs états de début et de fin. Par exemple, il est impossible d'ajouter des transitions pour font-family, car ce qu'est un "état médian" n'est pas clair. entre serif et monospace. En revanche, vous pouvez ajouter des transitions pour font-size, car son unité est une longueur qui peut être interpolée.

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

Transformer

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

Consultez la section sur les transformations dans notre module Fonctions.

Couleur

Avant, pendant et après une interaction, la couleur peut être un excellent indicateur d'état. Par exemple, un bouton peut changer de couleur si l'utilisateur pointe dessus. 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'options de couleur être transformées lors de l'interaction.

Consultez notre module sur les couleurs.

Ombres

Les ombres font souvent l'objet d'une transition pour indiquer un changement d'altitude, par exemple à partir du focus 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. La transition entre différents états filter peut produire des résultats assez impressionnants.

Consultez notre module sur les filtres.

Déclencheurs de transition

Pour que les transitions CSS puissent être activées, votre CSS doit inclure un changement d'état et un événement qui déclenche ce changement d'état. La pseudo-classe :hover est un exemple typique de ce type de 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 susceptibles de déclencher des changements d'état dans vos éléments.

• :hover: correspond si le curseur est placé sur l'élément.
• :focus: correspond si l'élément est sélectionné.
• :focus-within : correspond si l'élément ou l'un de ses descendants est concentré.
• :target: correspond lorsque le fragment de l'URL actuelle correspond à l'ID de l'élément.
• :active: correspond au moment où l'élément est en cours d'activation (généralement au moment si vous appuyez dessus).
• Modification de class par rapport à JavaScript: lorsque le class CSS d'un élément change via JavaScript et CSS effectueront 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 passage de la souris ou du focus, vous pouvez 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 sur 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, les CSS disposent d'une fonctionnalité multimédia appelée prefers-reduced-motion, qui détecte si l'utilisateur a indiqué une préférence pour moins de mouvement sur 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 l'article de blog prefers-reduced-motion: per distinctes, il faut parfois moins de mouvement pour en savoir plus sur cette fonctionnalité multimédia.

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, elles repoussent le contenu 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 des propriétés telles que transform et opacity à la place.

Consultez notre guide sur les animations CSS hautes performances pour approfondir le sujet.

Testez vos connaissances

Tester vos connaissances sur les transitions