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
. -
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.