Transition xassəsi

transition xassəsi - hamar keçidlər üçün qısaldılmış xassədir, eyni zamanda transition-duration, transition-property, transition-timing-function və transition-delay təyin etməyə imkan verir.

Sintaksis

selektor {
	transition: qiymet;
}

Xassələrin sırasının əhəmiyyəti yoxdur, lakin icra müddəti (transition-duration) gecikmədən (transition-delay) əvvəl olmalıdır.

Qiymətlər

Uyğun xassələrə baxın. Standart qiymət: all 0s ease 0s.

none qiyməti bütün keçidləri ləğv edir (onlar ani baş verəcək).

Nümunə

Blokun üzərinə siçanı gətirin - 3 saniyə heç nə baş verməyəcək (3s gecikmə var), sonra isə o enini 2 saniyə ərzində hamar şəkildə dəyişəcək. Əgər sonra siçanı çıxarsanız - yenə 3 saniyə heç nə baş verməyəcək, sonra isə en hamar şəkildə azalaraq ilk qiymətinə qayıdacaq:

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

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

Həmçinin bax

animation xassəsi,
kömgəyi ilə animasiya yaratmaq olar