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

selektor {
	transition-property: hodnota;
}

Příklad

Najeďte myší na blok - jeho šířka se plynule změní, protože transition-property má hodnotu width:

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

#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:

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

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

Viz také

vlastnost transition-duration,
která nastavuje dobu trvání plynulého přechodu
vlastnost transition-delay,
která nastavuje zpoždění před plynulým přechodem
vlastnost transition-timing-function,
která nastavuje časovací funkci pro plynulý přechod
vlastnost transition,
která je zkratkou pro plynulý přechod
vlastnost animation,
pomocí které lze vytvořit animaci