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-property est utilisée pour désigner les noms des propriétés CSS sur lesquelles un effet de transition devrait être appliqué.
Si vous définissez une propriété raccourcie (par exemple background), toutes les propriétés détaillées correspondantes seront animées de la même façon.
| Valeur initiale | all |
|---|---|
| Applicabilité | tous les éléments, ainsi que les pseudo-elements ::before et ::after |
| Héritée | non |
| Média | visuel |
| Valeur calculée | comme spécifié |
| Animable | non |
| Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Syntaxe
/* Avec un mot-clé */ transition-property: none; transition-property: all; transition-property: test_05; transition-property: -specific; transition-property: sliding-vertically; transition-property: test1; transition-property: test1, animation4; transition-property: all, height, all; transition-property: all, -moz-specific, sliding; /* Avec des valeurs globales */ transition-property: inherit; transition-property: initial; transition-property: unset;
Valeurs
none- Aucune propriété n'est concernée par les transitions.
all- Toutes les propriétés qui peuvent avoir une transition animée seront concernées.
IDENT- Une chaîne de caractère qui identifie la propriété pour laquelle on doit appliquer un effet de transition lorsque sa valeur change. Cet identifiant est composé de lettres entre
aetz, de chiffres entre0et9, d'un tiret bas (_) ou d'un tiret(-). Le premier caractère qui n'est pas un tiret doit être une lettre (autrement dit, l'identifiant ne peut pas commencer par un chiffre même si celui-ci est précédé d'un tiret). De plus, l'identifiant ne peut pas commencer par deux tirets.
Syntaxe formelle
none | <single-transition-property>#où
<single-transition-property> = all | IDENT
Exemples
Il y a plusieurs exemples sur les transitions CSS qui se trouvent dans l'article sur les transitions CSS.
Spécifications
| Spécification | État | Commentaires |
|---|---|---|
| CSS Transitions La définition de 'transition-property' dans cette spécification. |
Version de travail | Définition initiale. |
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Support simple | (Oui) -webkit | 4.0 (2.0) -moz 16.0 (16.0)[1] |
10 | 11.6-o 12.10 # |
(Oui) -webkit |
Valeur IDENT |
(Oui) | (Oui) | (Oui) | 12.10Pas de support | Pas de support |
| Fonctionnalité | Android | Chrome pour Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Support simple | (Oui) -webkit | (Oui) -webkit | 4.0 (2.0) -moz 16.0 (16.0)[1] |
? | ? | (Oui) -webkit |
Valeur IDENT |
(Oui) | (Oui) | (Oui) | (Oui) | (Oui) | 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.