transition

par 4 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 est une propriété raccourcie pour transition-property, transition-duration, transition-timing-function, et transition-delay. Elle permet de définir la transition entre deux états d'un élément.

  • Valeur initiale La concaténation des valeurs initiales des propriétés associées :
    • transition-delay: 0s
    • transition-duration: 0s
    • transition-property: all
    • transition-timing-function: ease
  • S'applique à tous les éléments, ainsi que les pseudo-elements::before et ::after
  • Héritée non
  • Pourcentages
  • Média interactive
  • Valeur calculée comme spécifié
  • Animable non
  • Ordre canonique l'ordre d'apparition dans la grammaire formelle des valeurs

Syntaxe

Formal syntax: [ none | <single-transition-property> ] || <time> || <timing-function> || <time>

Notez que l'ordre des valeurs de cette propriété est important : la première valeur est assignée à la durée de la transition, et la seconde au délai avant la transition.

Référez-vous à "Lorsque les listes de valeurs sont de longueurs différentes" pour plus de détails sur la manière dont sont gérées les listes de valeurs de longueurs différentes. Pour faire court, les descriptions de transition au-deçà du nombre de propriétés animées sont ignorées.

Exemples

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

Spécifications

Spécification Statut Commentaire
CSS Transitions
La définition de 'transition' dans cette spécification.
Working Draft  

Compatibilité des navigateurs

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de base 1.0 -webkit 4.0 (2.0) -moz
16.0 (16.0)
10.0 11.6 -o
12.5 #
3.0 -webkit
Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base 2.1 -webkit 4.0 (2.0) -moz
16.0 (16.0)
? 10.0 -o
12.5 #
3.2 -webkit

Voir également

Étiquettes et contributeurs liés au document

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