transition-property

par 3 contributeurs :

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.

Résumé

La propriété CSS transition-property est utilisée pour définir le nom de propriétés CSS sur lesquelles un effet de transition doit être appliqué.

Note : l'ensemble des propriétés qui peuvent être animées est sujet à modification ; ainsi, il est conseillé d'éviter d'utiliser des propriétés qui ne font pas partie de la liste actuellement supportée, puisque les résultats pourraient causer des effets inattendus.

Si vous définissez une propriété raccourcie (par exemple, background, toutes les sous-propriétés qui peuvent être animées le seront.

Syntaxe

Syntaxe formelle : none | <single-transition-property>#  [ ‘,’ <single-transition-property># ]*
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

Valeurs

none
Aucune propriété n'aura de transition.
all
Toutes les propriétés qui peuvent avoir une transition animée le seront.
IDENT
Une chaîne identifiant la propriété sur laquelle une transition doit être appliquée quand sa valeur change. Cet identifiant est composé de lettres non sensibles à la casse de a à z, chiffres de 0 à 9, un tiret bas (_) ou un tiret (-). Le premier caractère qui n'est pas un tiret doit être une lettre (ce qui écrate les identifiants commençants par un chiffre même précédé d'un tiret). De même, deux tirets au début d'un identifiant est interdit.

Exemples

Il y a de nombreux exemples de transitions CSS dans l'article transitions CSS.

Spécifications

Spécification Statut Commentaire
CSS Transitions Working Draft  

Compatibilité des navigateurs

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de base (Oui)-webkit 4.0 (2.0)-moz
16.0 (16.0)
10 11.6-o
12.5 #
(Oui)-webkit
Fonction Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base (Oui)-webkit (Oui)-webkit 4.0 (2.0)-moz
16.0 (16.0)
? ? (Oui)-webkit

Voir également

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : teoli, gudoy, FredB
Dernière mise à jour par : teoli,
Masquer la barre latérale