transition-property CSS propriété

Définition de la CSS transition-property.

La propriété de Transition CSS transition-property permet de spécifier les propriétés CSS qui doivent être transformées au moment du changement de leur valeur.

Exemple de syntaxe CSS transition-property :

.ma-transition-css{ width:50px; height:50px;}
.ma-transition-css:hover{ width:100px; height:100px;
  transition-property : width, height;
}

La propriété de Transition CSS transition-property accepte les propriétés CSS suivante (non exhaustive):

none : pas de propriété (valeur seule).
all : toutes les propriétés (valeur seule). Valeur par défaut.
background-color : la transition Css fait une interpolation de couleur.
background-position : la transition Css fait une interpolation de la liste des valeurs, pourcentage, ou calc().
border-bottom-color : la transition Css fait une interpolation de couleur.
border-bottom-width : la transition Css fait une interpolation de nombres réels.
border-left-color : la transition Css fait une interpolation de couleur.
border-left-width : la transition Css fait une interpolation de nombres réels.
border-right-color : la transition Css fait une interpolation de couleur.
border-right-width : la transition Css fait une interpolation de nombres réels.
border-spacing : la transition Css fait une interpolation de la liste des valeurs.
border-top-color : la transition Css fait une interpolation de couleur.
border-top-width : la transition Css fait une interpolation de nombres réels.
bottom : la transition Css fait une interpolation de nombres réels, pourcentage, ou calc().
clip : la transition Css fait une interpolation sur les positions X et Y et sur la taille.
color : la transition Css fait une interpolation de couleur.
font-size : la transition Css fait une interpolation de nombres réels.
font-weight : la transition Css fait une interpolation sur les valeur 100, 200, 300, 400 , ...
height : la transition Css fait une interpolation de nombres réels, pourcentage, ou calc().
left : la transition Css fait une interpolation de nombres réels, pourcentage, ou calc().
letter-spacing : la transition Css fait une interpolation de nombres réels.
line-height : la transition Css fait une interpolation de nombres réels ou de nombres décimaux.
margin-bottom : la transition Css fait une interpolation de nombres réels.
margin-left : la transition Css fait une interpolation de nombres réels.
margin-right : la transition Css fait une interpolation de nombres réels.
margin-top : la transition Css fait une interpolation de nombres réels.
max-height : la transition Css fait une interpolation de nombres réels, pourcentage, ou calc()).
max-width : la transition Css fait une interpolation de nombres réels, pourcentage, ou calc().
min-height : la transition Css fait une interpolation de nombres réels, pourcentage, ou calc().
min-width, la transition Css fait une interpolation de nombres réels, pourcentage, ou calc().
opacity, la transition Css fait une interpolation de nombres décimaux.
outline-color : la transition Css fait une interpolation de couleur.
outline-width : la transition Css fait une interpolation de nombres réels.
padding-bottom : la transition Css fait une interpolation de nombres réels.
padding-left : la transition Css fait une interpolation de nombres réels.
padding-right : la transition Css fait une interpolation de nombres réels.
padding-top : la transition Css fait une interpolation de nombres réels.
right : la transition Css fait une interpolation de nombres réels, pourcentage, ou calc().
text-indent : la transition Css fait une interpolation de nombres réels, pourcentage, ou calc().
text-shadow : la transition Css fait une interpolation la liste des valeurs.
top : la transition Css fait une interpolation de nombres réels, pourcentage, ou calc().
vertical-align, la transition Css fait une interpolation de nombres réels.
visibility : la transition Css fait deux états non interpolé : visible ou invisible
width : la transition Css fait une interpolation de nombres réels, pourcentage, ou calc().
word-spacing : la transition Css fait une interpolation de nombres réels.
z-index : la transition Css fait une interpolation de nombres entiers.

La propriété de Transition CSS transition-property accepte une ou plusieurs valeurs citées ci-dessus séparées par un virgule.

J'ai fait un article complet sur la manière de concevoir des transitions en CSS3.

Vous trouverez aussi un petit outil pour générer des exemples simples de transitions CSS3. Vous pourrez donc tester en direct la propriété transition-property Css.

Exemple de code transition-property CSS

Conditions d'application de la CSS transition-property.

La valeur de la CSS transition-property peut être mise directement dans la propriété de raccourci CSS transition.

Héritage des valeurs Css de transition-property.

La valeur de la propriété de Transition CSS transition-property n'est pas héritée.

Problème d'interprétation de transition-property en Css.

La propriété de Transition CSS transition-property pose des problèmes d'interprétation, n'est reconnue que par Internet Explorer 10+ et Firefox 16+ et Opera 12.1+.

Compatibilités navigateurs de la propriété transition-property

Détails des versions de la CSS transition-property: Propriété transition-property est compatible avec CSS3 et plus.

Résumé du support navigateurs de la CSS transition-property: Propriété CSS transition-property est compatible à partir de Chrome 26; Propriété CSS transition-property est compatible à partir de Firefox 16; Propriété CSS transition-property est compatible à partir de Internet Explorer 10; Propriété CSS transition-property est compatible à partir de Opera 12.1; Propriété CSS transition-property est compatible à partir de Safari 6.1

Propriétés CSS préfixées de transition-property

Vous trouverez ci-dessous les propriétés CSS préfixées équivalentes à la propriété transition-property CSS :

Pour Firefox 4.0+ et < 16, vous pouvez utiliser : -moz-transition-property.
Pour Chrome 2.1+ et Safari 3.1+, vous pouvez utiliser : -webkit-transition-property.
Pour Opera 10+, vous pouvez utiliser : -o-transition-property. Pour info, il semble les versions préfixées pour le animations CSS soient supprimées sur la version 12.50 au profit des versions w3c non préfixées. Ne prend pas en charge pour le moment (02/2013) les propriété css suivante : text-shadow, zoom, grid-*, background-image, background-position, tous tes propriétés de couleur de bordure (border-color, border-bottom-color, ...)
Il existe bien une propriété css -ms-transition-property mais qui est compatible Internet Explorer 10 (donc pas d'intérêt de la mettre puisqu'il comprend la version non préfixée). Personnellement, je n'ai trouvé aucune documentation officielle sur la propriété css -ms-transition-property.

Votre avis sur la définition transition-property en CSS

Votez pour la définition CSS `transition-property`

Votes: 4.8 / 5 - 12 votes
Cliquez sur une étoile pour voter.

Définitions annexes à la Css transition-property

Définitions CSS annexes transition-property

background-color: La propriété d'Arrière-plan CSS BACKGROUND-COLOR permet de spécifier la couleur de l'arrière plan ou couleur de fond d'un élément HTML ou XTHML. Cette...[ background-color ]
background-position: La propriété d'Arrière-plan CSS BACKGROUND-POSITION permet de positionner des ou une image (image de fond) au sein du même l'arrière-plan. Le coin hau...[ background-position ]
border-bottom-color: La propriété de Couleur de Bordure CSS BORDER-BOTTOM-COLOR permet de spécifier la couleur de la bordure basse d'un élément (X)HTML.Exemple d'écriture ...[ border-bottom-color ]
border-bottom-width: La propriété de bordure CSS BORDER-BOTTOM-WIDTH permet de spécifier l'épaisseur de la bordure basse d'un élément (X)HTML.Exemple d'écriture CSS de bor...[ border-bottom-width ]
border-left-color: La propriété de Couleur de Bordure CSS BORDER-LEFT-COLOR permet de spécifier la couleur Css de la bordure gauche d'un élément (X)HTML.Exemple d'écritu...[ border-left-color ]
border-left-width: La propriété de bordure CSS BORDER-LEFT-WIDTH permet de spécifier l'épaisseur de la bordure gauche CSS d'un élément (X)HTML.Exemple d'écriture CSS de ...[ border-left-width ]
border-right-color: La propriété de Couleur de Bordure CSS BORDER-RIGHT-COLOR permet de spécifier la couleur de la bordure Css droite d'un élément (X)HTML.Exemple d'écrit...[ border-right-color ]
border-right-width: La propriété de bordure Css BORDER-RIGHT-WIDTH permet de spécifier l'épaisseur de la bordure droite Css d'un élément (X)HTML.Exemple d'écriture CSS de...[ border-right-width ]
border-spacing: La propriété CSS BORDER-SPACING permet de spécifier l'espacement entre les bordures des cellules adjacentes d'un tableau.Exemple d'écriture CSS de bor...[ border-spacing ]
border-top-color: La propriété de Couleur de Bordure CSS BORDER-TOP-COLOR permet de spécifier la couleur de la bordure haute d'un élément (X)HTML.Exemple d'écriture CSS...[ border-top-color ]
border-top-width: La propriété de bordure CSS BORDER-TOP-WIDTH permet de spécifier l'épaisseur de la bordure haute Css d'un élément (X)HTML.Exemple d'écriture CSS de bo...[ border-top-width ]
bottom: La propriété de Position CSS BOTTOM permet de spécifier la position du bord bas de la marge d'un élément positionné par rapport au bord bas de son par...[ bottom ]
calc(): La fonction de Calculs Mathématiques CSS CALC() permet d'exécuter un calcul mathématique simple dans votre feuille CSS.Exemple d'écriture CSS de calc(...[ calc() ]
clip: La propriété CSS CLIP permet de recadrer un élément positionné avec position et dont la valeur est absolute.Exemple d'écriture CSS de clip .identifian...[ clip ]
color: La propriété de Couleur CSS COLOR permet de spécifier la couleur d'un texte d'un élément (X)HTML.Exemple d'écriture CSS de color color : tomato; color...[ color ]
font-size: La propriété de Taille de Fonte CSS FONT-SIZE permet de spécifier la taille de la fonte dans lequelle sera affiché le texte d'un élément (X)HTML.Exemp...[ font-size ]
font-weight: La propriété d'Epaisseur CSS FONT-WEIGHT permet de spécifier le type de gras à utiliser pour l'affichage du texte d'un élément (X)HTML.Exemple d'écrit...[ font-weight ]
height: La propriété de Hauteur CSS HEIGHT permet de spécifier la hauteur de la zone de contenu d'un élément (X)HTML dit de type block. Exemple d'écriture CSS...[ height ]
left: La propriété de Position CSS LEFT permet de spécifier la position du bord gauche de la marge d'un élément positionné par rapport au bord gauche de son...[ left ]
letter-spacing: La propriété CSS LETTER-SPACING permet d'augmenter ou diminuer l'espacement entre chaque lettre.Exemple d'écriture CSS de letter-spacing letter-spacin...[ letter-spacing ]
line-height: La propriété CSS LINE-HEIGHT permet de spécifier la hauteur d'une ligne de texte et donc aussi de gérer l'espace entre les lignes. Exemple d'écriture ...[ line-height ]
margin-bottom: La propriété de Marge CSS MARGIN-BOTTOM permet de spécifier l'espace entre la bordure basse d'un élément HTML ou XHTML et la bordure haute de l'élémen...[ margin-bottom ]
margin-left: La propriété de Marge CSS MARGIN-LEFT permet de spécifier l'espace entre la bordure gauche d'un élément HTML ou XHTML et la marge extérieure droite de...[ margin-left ]
margin-right: La propriété de Marge CSS MARGIN-RIGHT permet de spécifier l'espace entre la bordure droite d'un élément HTML ou XHTML et la marge extérieure gauche d...[ margin-right ]
margin-top: MARGIN-TOP est une propriété CSS qui permet de spécifier l'espace entre la bordure haute d'un élément HTML ou XHTML et la bordure basse de l'élément a...[ margin-top ]
max-height: La propriété de Hauteur CSS MAX-HEIGHT permet de spécifier la hauteur maximale de la zone de contenu d'un élément (X)HTML dit de type block. Exemple d...[ max-height ]
max-width: La propriété de Longueur CSS MAX-WIDTH permet de spécifier la longueur maximale de la zone de contenu d'un élément (X)HTML dit de type block. Exemple ...[ max-width ]
min-height: La propriété de Hauteur CSS MIN-HEIGHT permet de spécifier la hauteur minimale de la zone de contenu d'un élément (X)HTML dit de type block. Exemple d...[ min-height ]
min-width: La propriété de Longueur CSS MIN-WIDTH permet de spécifier la longueur minimale de la zone de contenu d'un élément (X)HTML dit de type block. Exemple ...[ min-width ]
opacity: La propriété d'Opacité CSS OPACITY permet de spécifier la quantité d'opacité ou de transparence à appliquer sur l'ensemble d'un élément (X)HTML. Exemp...[ opacity ]
outline-color: La propriété CSS OUTLINE-COLOR permet de spécifier la couleur des quatre contours de l'outline d'un élément lors de sa prise de focus. Les contours CS...[ outline-color ]
outline-width: La propriété CSS OUTLINE-WIDTH permet de spécifier l'épaisseur des quatre contours de l'outline d'un élément lors de sa prise de focus. Les contours C...[ outline-width ]
padding-bottom: La propriété de Marge CSS PADDING-BOTTOM permet de spécifier l'espace entre le contenu d'un élément et sa bordure basse. position des marges intérieur...[ padding-bottom ]
padding-left: La propriété de Marge CSS PADDING-LEFT permet de modifier l'espace entre le contenu d'un élément et sa bordure gauche. position des marges intérieures...[ padding-left ]
padding-right: La propriété de Marge CSS PADDING-RIGHT permet de modifier l'espace entre le contenu d'un élément et sa bordure droite. position des marges intérieure...[ padding-right ]
padding-top: La propriété de Marge CSS PADDING-TOP permet de spécifier l'espace entre le contenu d'un élément et sa bordure haute. position des marges intérieures ...[ padding-top ]
right: La propriété de Position CSS RIGHT permet de spécifier la position du bord droit de la marge d'un élément positionné par rapport au bord droit de son ...[ right ]
text-indent: La propriété CSS TEXT-INDENT permet de spécifier le décalage la première ligne d'un texte (retrait).Exemple d'écriture CSS de text-indent text-indent ...[ text-indent ]
text-shadow: La propriété d'ombre CSS TEXT-SHADOW permet de créer une ombre portée Css sous le texte.Exemple d'écriture CSS d'une ombre portée avec text-shadow tex...[ text-shadow ]
top: La propriété de Position CSS TOP permet de spécifier la position du bord haut de la marge d'un élément positionné par rapport au bord haut de son pare...[ top ]
transition: La propriété de Transition CSS TRANSITION est un raccourci qui permet de spécifier l'ensemble des propriétés CSS de transition sur lesquelles on veut ...[ transition ]
vertical-align: La propriété d'Alignement CSS VERTICAL-ALIGN permet de définir l'alignement vertical du texte ou plus globalement les éléments dits inline par rapport...[ vertical-align ]
visibility: La propriété de Visibilité CSS VISIBILITY permet de cacher un élément tout en gardant visible l'espace qu'il occupe, on dit que l'élément reste dans l...[ visibility ]
width: La propriété de Longueur CSS WIDTH permet de spécifier la longueur de la zone de contenu d'un élément (X)HTML dit de type block. Exemple d'écriture CS...[ width ]
word-spacing: La propriété CSS WORD-SPACING permet d'augmenter ou diminuer l'espacement par défaut qui est entre chaque mot.Exemple d'écriture CSS de word-spacing w...[ word-spacing ]
z-index: Z-INDEX CSS est propriété qui permet de spécifier la position d'empilement (notion de profondeur) d'un élément positionné par rapport aux autres éléme...[ z-index ]