transition

Exemple interactif

transition: margin-right 2s;

transition: margin-right 2s 0.5s;

transition: margin-right 2s ease-in-out;

transition: margin-right 2s ease-in-out 0.5s;

transition:
  margin-right 2s,
  color 1s;

transition: all 1s ease-out;

<section id="default-example">
  <div id="example-element">Survolez pour voir<br />la transition.</div>
</section>

#example-element {
  background-color: #e4f0f5;
  color: black;
  padding: 1rem;
  border-radius: 0.5rem;
  font: 1em monospace;
  width: 100%;
  transition: margin-right 2s;
}

#default-example:hover > #example-element {
  background-color: #990099;
  color: white;
  margin-right: 40%;
}

Elle permet de définir la transition entre deux états d'un élément. Les différents états peuvent être définis à l'aide de pseudo-classes telles que :hover ou :active ou être définis dynamiquement avec JavaScript.

Syntaxe

/* S'applique à une propriété */
/* nom de la propriété | durée */
transition: margin-right 4s;

/* nom de la propriété | durée | retard */
transition: margin-right 4s 1s;

/* nom de la propriété | durée | fonction */
transition: margin-right 4s ease-in-out;

/* nom de la propriété | durée | fonction | retard */
transition: margin-right 4s ease-in-out 1s;

/* nom de la propriété | durée | comportement */
transition: display 4s allow-discrete;

/* S'applique à deux propriétés */
transition:
  margin-right 4s,
  color 1s;

/* S'applique à toutes les propriétés modifiées */
transition: all 0.5s ease-out allow-discrete;
transition: 200ms linear 50ms;

/* Valeurs globales */
transition: inherit;
transition: initial;
transition: revert;
transition: revert-layer;
transition: unset;

La valeur de la propriété transition s'exprime comme l'une des options suivantes :

• La valeur spéciale none, qui indique qu'aucune transition n'aura lieu sur cet élément. C'est la valeur par défaut.
• Une ou plusieurs transitions avec une seule propriété, séparées par des virgules.

Chaque transition avec une seule propriété décrit la transition à appliquer à une seule propriété ou à toutes les propriétés. Elle comprend :

• zéro ou une valeur représentant la ou les propriétés auxquelles la transition doit s'appliquer. Cela peut être :
  • Un identifiant personnalisé (<custom-ident>) représentant une seule propriété.
  • La valeur spéciale all, qui indique que la transition s'appliquera à toutes les propriétés qui changent lorsque l'élément change d'état.
  • Aucune valeur, auquel cas la valeur all sera déduite et la transition définie s'appliquera toujours à toutes les propriétés changeantes.
• zéro ou une valeur <easing-function> représentant la fonction d'accélération à utiliser
• zéro, une ou deux valeurs <time>. La première valeur pouvant être analysée comme une durée est affectée à transition-duration, et la deuxième valeur pouvant être analysée comme une durée est affectée à transition-delay.
• zéro ou une valeur déclarant s'il faut lancer des transitions pour les propriétés dont le comportement d'animation est discret. La valeur, si elle est présente, est soit le mot-clé allow-discrete, soit le mot-clé normal.

Si vous définissez all comme propriété de transition pour une transition avec une seule propriété, puis définissez des transitions avec une seule propriété ultérieures avec des valeurs <custom-ident>, ces transitions ultérieures remplaceront la première. Par exemple :

transition:
  all 200ms,
  opacity 400ms;

Dans ce cas, toutes les propriétés qui changent lorsque l'élément change d'état seront animées avec une durée de 200ms, sauf opacity, qui mettra 400ms pour effectuer sa transition.

Voir comment c'est géré lorsque les listes de valeurs de propriété n'ont pas la même longueur. En bref, les descriptions de transition supplémentaires au-delà du nombre de propriétés réellement animées sont ignorées.

Définition formelle

Syntaxe formelle

transition = 
  <single-transition>#  

<single-transition> = 
  [ none | <single-transition-property> ]  ||
  <time>                                   ||
  <easing-function>                        ||
  <time>                                   ||
  <transition-behavior-value>              

<single-transition-property> = 
  all             |
  <custom-ident>  

<easing-function> = 
  <linear-easing-function>        |
  <cubic-bezier-easing-function>  |
  <step-easing-function>          

<transition-behavior-value> = 
  normal          |
  allow-discrete  

<linear-easing-function> = 
  linear      |
  <linear()>  

<cubic-bezier-easing-function> = 
  ease              |
  ease-in           |
  ease-out          |
  ease-in-out       |
  <cubic-bezier()>  

<step-easing-function> = 
  step-start  |
  step-end    |
  <steps()>   

<linear()> = 
  linear( [ <number> && <percentage>{0,2} ]# )  

<cubic-bezier()> = 
  cubic-bezier( [ <number [0,1]> , <number> ]#{2} )  

<steps()> = 
  steps( <integer> , <step-position>? )  

<integer> = 
  <number-token>  

<step-position> = 
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end         

Exemples

Exemple simple

Dans cet exemple, lorsque l'utilisateur·ice survole l'élément, il y a un délai d'une demi-seconde (500ms) avant qu'une transition de background-color de deux secondes ne se produise.

HTML

<a class="target">Survolez-moi</a>

CSS

Nous incluons deux valeurs de temps (<time>). Dans le raccourci transition, la première valeur <time> est la transition-duration. La deuxième valeur <time> est la transition-delay. Les deux valeurs par défaut sont 0s si elles sont omises.

.target {
  font-size: 2rem;
  background-color: palegoldenrod;
  transition: background-color 2s 500ms;
}

.target:hover {
  background-color: darkorange;
}

Spécifications

Compatibilité des navigateurs

Voir aussi

• Le module des transitions CSS
• Utiliser les transitions CSS
• L'interface API TransitionEvent