Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

transition-property - Propriété CSS

transition-property

Résumé des caractéristiques de la propriété transition-property

Description rapide
Définit la ou les propriétés sur lesquelles doit s'appliquer une transition.
Statut
Standard
S'applique à
Tous les éléments.
Type de valeur
Id (le nom d'une propriété ou all).
Pourcentages
Ne s'appliquent pas.
Valeur initiale
all
Héritée par défaut
Non
Type d'animation
Étant elle même un des paramètres d'une animation, cette propriété ne peut pas être animée
Module W3C
Module CSS - Les transitions
Références (W3C)
Statut du document:: WD (document de travail)

Description de la propriété transition-property.

transition-property définit quelle(s) propriété(s) doivent être soumises à une transition. La transition démarre lorsque la valeur d'une propriété est définie ou modifiée. Toutes les propriétés CSS ne peuvent pas être associées à une transition. En règle générale, il est possible d'appliquer une transition sur :

  • Les propriétés qui acceptent une valeur numérique, quelle que soit l'unité.
  • Les propriétés qui acceptent une couleur.

Pour une présentation générale des transitions, reportez-vous à la propriété résumée transition.

Syntaxes pour transition-property.

prop est le nom d'une propriété.

transition-property:
 none none all all prop prop , ,
;
  • transition-property: all;

    Toutes les propriétés auront un effet de transition lorsque leur valeur est définie ou modifiée. L'effet n'est cependant pas visible tant que la propriété transition-duration n'a pas été fixée à une valeur différente de zéro.

  • transition-property: none;

    Aucune propriété n'est soumise à un effet de transition.

  • transition-property: width;

    La propriété width est soumise à un effet de transition.

  • transition-property: width, height;

    Plusieurs noms de propriétés séparés par des virgules. Dans cet exemple, les deux propriétés width et height seront soumises à un effet de transition. Reportez-vous à la page sur les transitions multiples pour plus de précisions.

    Si l'une des propriétés listées n'est pas reconnue par le navigateur, elle est ignorée, mais le navigateur doit maintenir la correspondance avec les autres paramètres. Dans l'exemple ci-dessous, la propriété xxxx n'est pas reconnue mais cela ne doit pas décaler les durées, autrement dit, la transition sur width doit bien se faire sur 2 secondes.

    transition-property:xxxx width; transition-duration:1s 2s;
  • transition-property: initial; transition-property: inherit; transition-property: revert; transition-property: revert-layer; transition-property: unset;

    La valeur initiale est : all.

Animation de la propriété transition-property.

Pas d'animation possible pour la propriété transition-property.

Prise en charge par les navigateurs (compatibilité).

Les effets de transition sont bien pris en charge par tous les navigateurs depuis pas mal d'années. Il n'y a pas de précautions particulières à prendre au sujet de la compatibilité de la propriété transition-property.

Il faut cependant garder à l'esprit que toutes les propriétés ne peuvent pas faire l'objet d'une transition. En particulier, on ne peut pas appliquer de transition sur les propriétés qui n'acceptent que des valeurs non numériques (text-align par exemple).

Colonne 1
Prise en charge par les navigateurs des effets de transition en général.
Colonne 2
Support de la propriété transition-property.
1
Transitions
2
transition-property
Estimation de la prise en charge en pourcentage du parc actuel.
98%
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que transition-property.

Les spécifications CSS éditées par le W3C sont organisées en modules. transition-property fait partie du Module CSS - Les transitions (CSS Transitions). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Effet d'animation simple.
Définit le temps d'attente avant que la transition ne commence.
Définit la durée d'une transition.
Propriété définissant la fonction d'accélération à utiliser pendant une transition.