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

cssselektor {
  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:

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

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

Результат:

Həmçinin bax