Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.
La propriété transition est une propriété raccourcie pour les propriétés transition-property, transition-duration, transition-timing-function et transition-delay. 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.
| 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 |
| Média | interactif |
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
| Animable | non |
| Ordre canonique | l'ordre d'apparition dans la grammaire formelle des valeurs |
Syntaxe
/* S'applique à une propriété */ /* on a le nom et la durée */ transition: margin-left 4s; /* nom de la propriété | durée | retard */ transition: margin-left 4s 1s; /* nom | durée | fonction | retard */ transition: margin-left 4s ease-in-out 1s; /* S'applique à deux propriétés */ transition: margin-left 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;
On notera que, pour cette propriété, l'ordre des éléments est important. La première valeur qui peut être comprise comme une valeur temporelle (type <time>) sera affectée à transition-duration et la deuxième valeur de ce type sera affectée à transition-delay.
Si la liste des valurs 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.
Syntaxe formelle
<single-transition>#où
<single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>où
<single-transition-property> = all | IDENT
<single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)
Exemples
Plusieurs exemples de transitions CSS sont présentés sur l'article sur les transitions CSS.
Spécifications
| Spécification | État | Commentaires |
|---|---|---|
| CSS Transitions La définition de 'transition' dans cette spécification. |
Version de travail | Définition initiale. |
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Support simple | 1.0 -webkit 26.0 |
4.0 (2.0) -moz 16.0 (16.0) [1] |
10.0 | 10.1 -o 12.10 |
3.0 -webkit 6.1 |
| Dégradés | Pas de support | Pas de support | 10.0 | Pas de support |
| Fonctionnalité | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Support simple | 2.1 -webkit | 4.0 (2.0) -moz 16.0 (16.0)[1] |
? | 10.0 -o 12.10 |
3.2 -webkit |
| Dégradés[2] | Pas de support | Pas de support | 10.0 | Pas de support | Pas de support |
[1] En plus de la version préfixée par -moz, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) prend en charge la version préfixée par -webkit à des fins de compatibilité web grâce à la préférence layout.css.prefixes.webkit dont la valeur par défaut vaut false. Depuis Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), cette valeur par défaut est passée à true.
[2] Test PPK