Vlastnost transition-property

Vlastnost transition-property nastavuje vlastnost, která bude animována plynulým přechodem transition. Jako hodnotu je třeba předat název CSS vlastnosti, která bude animována. Pokud nastavíte hodnotu all (je nastavena ve výchozím stavu) - budou animovány všechny vlastnosti najednou.

Syntaxe

cssselektor {
  transition-property: hodnota;
}

Příklad

Najeďte myší na blok - jeho šířka se plynule změní, protože transition-property má hodnotu 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;
}

Результат:

Příklad . Hodnota all

V tomto příkladu má transition-property hodnotu all - proto se budou plynule měnit všechny vlastnosti zadané pro stav hover (v našem případě je to width a height). Všechny změny proběhnou za stejný čas, který je zadán v 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;
}

Результат:

Viz také