Propriété transition-property

La propriété transition-property définit la propriété qui sera animée par une transition fluide transition. La valeur doit être le nom d'une propriété CSS qui sera animée. Si la valeur all est définie (elle est définie par défaut) - toutes les propriétés seront animées simultanément.

Syntaxe

csssélecteur {
  transition-property: valeur;
}

Exemple

Passez la souris sur le bloc - il modifiera progressivement sa largeur, car transition-property a la valeur width :

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  transition-duration: 2s;
  transition-property: width;
  height: 50px;
  width: 100px;
}
#elem:hover {
  width: 400px;
}

Результат:

Exemple . Valeur all

Dans cet exemple, transition-property a la valeur all - donc toutes les propriétés définies pour l'état hover seront modifiées progressivement (dans notre cas, il s'agit de width et height). Tous les changements auront lieu pendant la même durée, définie dans transition-duration :

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  transition-duration: 2s;
  transition-property: all;
  height: 25px;
  width: 100px;
}
#elem:hover {
  height: 50px;
  width: 400px;
}

Результат:

Voir aussi