Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

transition

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 est une propriété raccourcie pour les propriétés transition-property, transition-duration, transition-timing-function et transition-delay. Elle permet de définir la transition entre deux états d'un élément. Les différents états peuvent être définis à l'aide de pseudo-classes telles que :hover ou :active ou être définis dynamiquement avec JavaScript.

Valeur initialepour chaque propriété individuelle de la propriété raccourcie :
Applicabilitétous les éléments, ainsi que les pseudo-elements ::before et ::after
Héritéenon
Médiainteractif
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
Animablenon
Ordre canoniquel'ordre d'apparition dans la grammaire formelle des valeurs

Syntaxe

/* S'applique à une propriété */
/* on a le nom et la durée */
transition: margin-left 4s;

/* nom de la propriété | durée | retard */
transition: margin-left 4s 1s;

/* nom | durée | fonction | retard */
transition: margin-left 4s ease-in-out 1s;

/* S'applique à deux propriétés */
transition: margin-left 4s, color 1s;

/* S'applique à toutes les propriétés modifiées */
transition: all 0.5s ease-out;

/* Valeurs globales */
transition: inherit;
transition: initial;
transition: unset;

On notera que, pour cette propriété, l'ordre des éléments est important. La première valeur qui peut être comprise comme une valeur temporelle (type <time>) sera affectée à transition-duration et la deuxième valeur de ce type sera affectée à transition-delay.

Si la liste des valurs est trop courte pour les différentes propriétés, les valeurs seront répétées. Si la liste est trop longue, elle sera tronquée.

Syntaxe formelle

<single-transition>#


<single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>


<single-transition-property> = all | IDENT
<single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)

Exemples

Plusieurs exemples de transitions CSS sont présentés sur l'article sur les transitions CSS.

Spécifications

Spécification État Commentaires
CSS Transitions
La définition de 'transition' dans cette spécification.
Version de travail Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple 1.0 -webkit
26.0
4.0 (2.0) -moz
16.0 (16.0) [1]
10.0 10.1 -o
12.10
3.0 -webkit
6.1
Dégradés Pas de support Pas de support 10.0 Pas de support  
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple 2.1 -webkit 4.0 (2.0) -moz
16.0 (16.0)[1]
? 10.0 -o
12.10
3.2 -webkit
Dégradés[2] Pas de support Pas de support 10.0 Pas de support 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.
[2] Test PPK

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, fscholz, Sebastianz, J.DMB, louuis, teoli, FredB
 Dernière mise à jour par : SphinxKnight,