Lastnost transition

Lastnost transition je okrajšava za gladke prehode, omogoča sočasno nastavitev transition-duration, transition-property, transition-timing-function in transition-delay.

Sintaksa

selektor {
	transition: vrednost;
}

Vrstni red lastnosti ni pomemben, vendar mora biti čas trajanja (transition-duration) postavljen pred zakasnitev (transition-delay).

Vrednosti

Glej ustrezne lastnosti. Privzeta vrednost: all 0s ease 0s.

Vrednost none prekliče vse prehode (pojavili se bodo takoj).

Primer

Z miško se pomaknite čez blok - 3 sekunde se ne bo nič zgodilo (nastavljena je zakasnitev 3s), nato pa bo gladko spremenil svojo širino v 2 sekundah. Če nato miško umaknete - se spet 3 sekunde ne bo nič zgodilo, nato pa se bo širina gladko zmanjšala na prvotno vrednost:

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

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

Glejte tudi

lastnost animation,
s katero lahko ustvarite animacijo