transition-property

La propriété transition-property désigne 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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
transition-propertyChrome Support complet 26
Support complet 26
Support complet 1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet 12
Support complet 12
Support complet 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Support complet 16
Support complet 16
Support complet 4
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 44
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée 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.
IE Support complet 10
Support complet 10
Support complet 10
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Opera Support complet 12.1
Support complet 12.1
Support complet 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Aucun support 11.6 — 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -o-
Safari Support complet 9
Support complet 9
Support complet 3.1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet ≤37
Support complet ≤37
Support complet ≤37
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet 26
Support complet 26
Support complet 18
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Android Support complet 16
Support complet 16
Support complet 4
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 44
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée 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.
Opera Android Support complet 12.1
Support complet 12.1
Support complet 14
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Aucun support 12 — 14
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -o-
Safari iOS Support complet 9
Support complet 9
Support complet 2
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Samsung Internet Android Support complet 1.5
Support complet 1.5
Support complet 1.0
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
IDENT value
Expérimentale
Chrome Support complet 1Edge Support complet 12Firefox Support complet 16IE Support complet 10Opera Support complet OuiSafari Support complet 4WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 16Opera Android Support complet OuiSafari iOS Support complet 3Samsung Internet Android Support complet 1.0

Légende

Support complet  
Support complet
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi