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
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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 leclass
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
Quelle propriété de transition permet de spécifier le lissage de vitesse ?
transition-cubic-bezier
transition-duration
transition-timing-function
animation-ease
transition-easing
Il est recommandé d'utiliser transition-property: all
Toutes les propriétés peuvent faire l'objet d'une transition.