Svojstvo transition

Svojstvo transition je skraćenje za postepene prelaze, omogućava da se istovremeno podesi transition-duration, transition-property, transition-timing-function i transition-delay.

Sintaksa

selektor {
	transition: vrednost;
}

Redosled svojstava nije bitan, međutim vreme trajanja (transition-duration) mora da stoji pre kašnjenja (transition-delay).

Vrednosti

Vidite odgovarajuća svojstva. Podrazumevana vrednost: all 0s ease 0s.

Vrednost none poništava sve prelaze (oni će se odvijati trenutno).

Primer

Postavite miš iznad bloka - 3 sekunde neće se ništa dešavati (postavljeno je kašnjenje od 3s), a zatim će on postepeno promeniti svoju širinu za 2 sekunde. Ako zatim uklonite miš - ponovo će 3 sekunde ništa ne biti, a zatim će se širina postepeno smanjiti na početnu vrednost:

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

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

Pogledajte takođe

svojstvo animation,
pomoću koga se može napraviti animacija