transition

La propriété transition est une propriété raccourcie pour les propriétés transition-property, transition-duration, transition-timing-function et transition-delay.

Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !

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.

/* S'applique à une propriété */
/* on a le nom et la durée */
transition: margin-right 4s;

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

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

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

/* 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;

/* Valeurs globales */
transition: inherit;
transition: initial;
transition: unset;

La propriété transition se définit comme une ou plusieurs propriétés de transitions, séparées par des virgules.

Chacune des propriétés de transition décrit la transition qui devrait être appliquée à une propriété donnée (ou pour les valeurs spéciales all et none). Une propriété de transition inclut :

• zéro ou une valeur qui représente la propriété à laquelle la transition s'applique. Ça peut être :
  • le mot-clé none
  • le mot-clé all
  • Un identifiant (<custom-ident>) qui nomme une propriété CSS.
• zéro ou une valeur <single-transition-timing-function> qui représente la fonction de temporisation utilisée pour la transition
• zéro, une ou deux valeurs <time>. La première valeur qui peut être interprétée comme un temps sera affectée à la propriété transition-duration et la seconde valeur qui peut être affectée comme un temps sera affectée à la propriété transition-delay.

Si la liste des valeurs est trop courte pour les différentes propriétés, les valeurs seront répétées. Si la liste est trop longue, elle sera tronquée.

<single-transition>#
où 
<single-transition> = [ none | <single-transition-property> ] || <time> || <easing-function> || <time>
où 
<single-transition-property> = all | <custom-ident>
<easing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>
où 
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier([0,1]>, <number>, [0,1]>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)
où 
<step-position> = jump-start | jump-end | jump-none | jump-both | start | end

Plusieurs exemples de transitions CSS sont présentés sur l'article sur les transitions CSS.

• Utiliser les transitions CSS
• TransitionEvent