transition-property - Propriété CSS
Résumé des caractéristiques de la propriété transition-property
all
).all
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:
;
- 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
etheight
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 surwidth
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).
transition-property
.
transition-property
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.