CSS - Propriété transition-property

Description de la propriété transition-property.

transition-property définit à quelle propriété s'applique la transition. La transition démarre lorsque la valeur de cette 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é raccourcie transition.

Syntaxes pour transition-property.

• transition-property: all;

  Valeur par défaut. 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: initial;

  La valeur initiale est all.

• transition-property: unset; transition-property: inherit;

  Reportez-vous à la description générale de ces valeurs.

Voir aussi...

Animation - Propriétés.

• animation : Paramètres d'animation.
• animation-delay : Temps d'attente avant le démarrage de l'animation.
• animation-direction : Sens de l'animation (normal ou inverse).
• animation-duration : Durée d'une animation.
• animation-fill-mode : Style de remplacement lorsque l'animation n'est pas en cours.
• animation-iteration-count : Nombre de répétition de l'animation.
• animation-name : Nom d'une animation.
• animation-play-state : État de l'animation (en cours ou en pause).
• animation-timing-function : Fonction non linéaire définissant la progression d'une animation.
• transition : Effet d'animation simple.
• transition-delay : Temps d'attente avant que la transition ne commence.
• transition-duration : Durée de la transition.
• transition-timing-function : Fonction définissant une transition non linéaire.

Animation - Directives.

• @keyframes : Définition d'une animation.

Animation - Fonctions.

• cubic-bezier() : Détermine une progression non linéaire pour les animations.
• steps() : Définit une animation saccadée, pas par pas.