MDN will be in maintenance mode on Wednesday September 20th, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

La propriété transition est une propriété raccourcie pour les propriétés transition-property, transition-duration, transition-timing-function et transition-delay.

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

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

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

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

/* S'applique à deux propriétés */
transition: margin-right 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;

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 :
Type d'animationdiscrète
Ordre canoniquel'ordre d'apparition dans la grammaire formelle des valeurs

Syntaxe

La propriété transition se définit comme une ou plusieurs propriétés de transitions, séparées par des virgules.

Chacune des propriétés de transtition décrit la transition qui devrait être appliquée à une propriété donnée (ou pour les valeurs spéciales all et none). Une propriété de transition inclut :

  • zéro ou une valeur qui représente la propriété à laquelle la transition s'applique. Ça peut être :
    • le mot-clé none
    • le mot-clé all
    • Un identifiant (<custom-ident>) qui nomme une propriété CSS.
  • zéro ou une valeur <single-transition-timing-function> qui représente la fonction de temporisation utilisée pour la transition
  • zéro, une ou deux valeurs <time>. La première valeur qui peut être interprétée comme un temps sera affectée à la propriété transition-duration et la seconde valeur qui peut être affectée comme un temps sera affectée à la propriété transition-delay.

Si la liste des valeurs 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 | <custom-ident>
<single-transition-timing-function> = <single-timing-function>


<single-timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function> | <frames-timing-function>


<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, [ start | end ] ]?)
<frames-timing-function> = frames(<integer>)

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) Edge Internet Explorer Opera Safari
Support simple 1.0 -webkit
26.0
4.0 (2.0) -moz
16.0 (16.0) [1]
(Oui)-webkit
(Oui)
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  
frames() Pas de support[3] Pas de support[3] ? Pas de support Pas de support[3] ?
Fonctionnalité Android Firefox Mobile (Gecko) Edge IE Mobile Opera Mobile Safari Mobile
Support simple 2.1 -webkit 4.0 (2.0) -moz
16.0 (16.0)[1]
(Oui)-webkit
(Oui)
? 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
frames() ? Pas de support[3] ? Pas de support Pas de support[3] ?

[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

[3] Le nom utilisé pour la fonction frames() est sujet à discussions et est actuellement désactivé dans les navigateurs tant qu'une décision finale n'a pas été prise. Actuellement, la fonctionnalité est seulement activée dans Nightly/Canary.

Notes relatives à Quantum

  • Gecko possède un bug qui empêche les transitions entre la propriété text-shadow définie avec une couleur d'une part et une propriété text-shadow sans couleur d'autre part (bug 726550). Cela a été corrigé dans le nouveau moteur de rendu CSS (Stylo), prévu pour être disponible avec Firefox 57.
  • Un autre bug de Gecko empêche le déclenchement des transitions sur un élément lorsqu'on utilise animation-fill-mode: forwards et que l'animation est terminée ou a été annulée (cf. bug 1192592 et ces cas de tests pour plus d'informations). Ce problème a été corrigé avec Quantum.

Voir aussi

Étiquettes et contributeurs liés au document

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