transition
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
La propriété transition
est une propriété raccourcie pour les propriétés transition-property
, transition-duration
, transition-timing-function
et transition-delay
.
Exemple interactif
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é */
/* 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.
- le mot-clé
-
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.
Définition formelle
Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :
|
---|---|
Applicabilité | tous les éléments, ainsi que les pseudo-elements ::before et ::after |
Héritée | non |
Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
Type d'animation | Not animatable |
Syntaxe formelle
transition =
<single-transition>#
<single-transition> =
[ none | <single-transition-property> ] ||
<time> ||
<easing-function> ||
<time>
<single-transition-property> =
all |
<custom-ident>
<easing-function> =
<linear-easing-function> |
<cubic-bezier-easing-function> |
<step-easing-function>
<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>? )
<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end
Exemples
Plusieurs exemples de transitions CSS sont présentés sur l'article sur les transitions CSS.
Spécifications
Specification |
---|
CSS Transitions # transition-shorthand-property |
Compatibilité des navigateurs
BCD tables only load in the browser