Vlastnost transition

Vlastnost transition je zkratka pro plynulé přechody, umožňuje současně nastavit transition-duration, transition-property, transition-timing-function a transition-delay.

Syntaxe

selektor {
	transition: hodnota;
}

Pořadí vlastností nemá význam, avšak doba trvání (transition-duration) musí být před zpožděním (transition-delay).

Hodnoty

Viz příslušné vlastnosti. Výchozí hodnota: all 0s ease 0s.

Hodnota none zruší všechny přechody (budou probíhat okamžitě).

Příklad

Najeďte myší na blok - 3 sekundy se nic nestane (je nastaveno zpoždění 3s), a poté plynule změní svou šířku za 2 sekundy. Pokud poté myš odeberete - opět 3 sekundy se nic nestane, a poté se šířka plynule zmenší na původní hodnotu:

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

#elem {
	border: 1px solid black;
	transition: width 2s ease 3s;
	width: 100px;
	height: 50px;
}
#elem:hover {
	width: 400px;
}

Viz také

vlastnost animation,
pomocí které lze vytvořit animaci