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 Statut Commentaires
CSS Transitions
La définition de 'transition' dans cette spécification.
Version de travail Définition initiale.

Compatibilité des navigateurs

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 -webkit
26.0 #
4.0 (2.0) -moz
16.0 (16.0)
10.0 10.1 -o
12.10 #
3.0 -webkit
6.1
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 -webkit 4.0 (2.0) -moz
16.0 (16.0)
? 10.0 -o
12.10 #
3.2 -webkit

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,