Transition - Astuces CSS | CSS Almanach 2025

La transitionpropriété est une propriété abrégée utilisée pour représenter jusqu'à quatre propriétés longues liées à la transition:

.example ( transition: (transition-property) (transition-duration) (transition-timing-function) (transition-delay); )

Ces propriétés de transition permettent aux éléments de changer de valeur sur une durée spécifiée, en animant les modifications de propriété, plutôt que de les avoir immédiatement. Voici un exemple simple qui transite la couleur d'arrière-plan d'un élément sur: hover:

div ( transition: background-color 0.5s ease; background-color: red; ) div:hover ( background-color: green; )

Ce div prendra une demi-seconde lorsque la souris sera dessus pour passer du rouge au vert. Voici une démonstration en direct d'une telle transition:

Voir la démonstration de Pen Transition par Louis Lazaris (@impressivewebs) sur CodePen.

Vous pouvez spécifier une propriété particulière comme nous l'avons vu ci-dessus, ou utiliser la valeur «all» pour faire référence aux propriétés de transition.

div ( transition: all 0.5s ease; background: red; padding: 10px; ) div:hover ( background: green; padding: 20px; )

Dans cet exemple ci-dessus, l'arrière-plan et le remplissage effectueront une transition, en raison de la valeur «tous» spécifiée pour la transition-propertypartie de la sténographie.

Vous pouvez séparer les jeux de valeurs par des virgules pour effectuer différentes transitions sur différentes propriétés:

div ( transition: background 0.2s ease, padding 0.8s linear; )

Pour la plupart, l'ordre des valeurs n'a pas d'importance - à moins qu'un délai ne soit spécifié. Si vous spécifiez un délai, vous devez d'abord spécifier une durée. La première valeur que le navigateur reconnaît comme une valeur d'heure valide représentera toujours la durée. Toute valeur de temps valide ultérieure sera analysée comme le délai.

Certaines propriétés ne peuvent pas faire l'objet d'une transition car elles ne sont pas des propriétés animables. Voir la spécification pour une liste complète des propriétés pouvant être animées.

En spécifiant la transition sur l'élément lui-même, vous définissez la transition qui se produira dans les deux directions. C'est-à-dire que lorsque les styles sont modifiés (par exemple lors du survol), leurs propriétés feront la transition, et lorsque les styles reviendront (par exemple, lorsque le survol est désactivé), ils effectueront une transition. Par exemple, les transitions de démonstration suivantes en survol, mais pas en survolant:

Voir le Pen zohgt de Louis Lazaris (@impressivewebs) sur CodePen.

Cela se produit parce que la transition a été déplacée vers le :hoversélecteur d'état et qu'il n'y a pas de transition correspondante sur le sélecteur qui cible l'élément directement sans l' :hoverétat.

Pour la compatibilité dans tous les navigateurs pris en charge, les préfixes de fournisseur sont requis, avec la syntaxe standard déclarée en dernier:

.example ( -webkit-transition: background-color 500ms ease-out 1s; -moz-transition: background-color 500ms ease-out 1s; -o-transition: background-color 500ms ease-out 1s; transition: background-color 500ms ease-out 1s; )

IE10 (la première version stable d'IE à prendre en charge transition) ne nécessite pas le -ms-préfixe.

Prise en charge du navigateur

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.