Vlastnosť transition

Vlastnosť transition je skratka pre plynulé prechody, umožňuje súčasne nastaviť transition-duration, transition-property, transition-timing-function a transition-delay.

Syntax

selektor {
	transition: hodnota;
}

Poradie vlastností nemá význam, avšak doba trvania (transition-duration) musí byť pred oneskorením (transition-delay).

Hodnoty

Pozri príslušné vlastnosti. Predvolená hodnota: all 0s ease 0s.

Hodnota none zruší všetky prechody (prebiehať budú okamžite).

Príklad

Prejdite myšou nad blok - 3 sekundy sa nič nestane (je nastavené oneskorenie 3s), potom plynule zmení svoju šírku počas 2 sekúnd. Ak potom myš odstránite - znova sa 3 sekundy nič nestane, potom sa šírka 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;
}

Pozrite tiež

vlastnosť animation,
pomocou ktorej môžete vytvoriť animáciu