transition-property

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

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.

Valeur initialeall
Applicabilitétous les éléments, ainsi que les pseudo-elements ::before et ::after
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Animablenon
Ordre canoniquel'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 a et z, de chiffres entre 0 et 9, 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>#


<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)
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)
? ? (Oui) -webkit
Valeur IDENT (Oui) (Oui) (Oui) (Oui) (Oui) Pas de support

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,