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é.

Note : L'ensemble des propriétés CSS qui peuvent être animées évolue. Vous devriez donc éviter de lister ici des propriétés qui, actuellement, ne sont pas animées car elles pourraient l'être demain et cela pourrait affecter votre document.

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.

Syntaxe

/* Avec un mot-clé */
transition-property: none;
transition-property: all;

/* Valeurs utilisant un identifiant */
/* <custom-ident> */
transition-property: test1;
transition-property: test_05;
transition-property: -specific;
transition-property: sliding-vertically; 

/* Valeurs multiples */
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.
<custom-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. Pour plus de détails sur la forme de cet identifiant, voir la page sur le type <custom-ident>.

Syntaxe formelle

none | <single-transition-property>#


<single-transition-property> = all | <custom-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.
Valeur initialetous
Applicabilitétous les éléments, ainsi que les pseudo-elements ::before et ::after
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple

26

Oui -webkit-

12

12 -webkit-

16

4 -moz-

49 -webkit-

44 -webkit- 1

10

12.1

15 -webkit-

11.6 — 15 -o-

Oui

Oui -webkit-

IDENT value Oui ? Oui Oui Oui Non
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple

Oui

Oui -webkit-

26

Oui -webkit-

12

12 -webkit-

16

4 -moz-

49 -webkit-

44 -webkit- 1

?

Oui

Oui -webkit-

Oui

Oui -webkit-

IDENT value Oui Oui ? Oui Oui Non Oui

1. From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, fscholz, Sebastianz, teoli, gudoy, FredB
Dernière mise à jour par : SphinxKnight,