Xususiyyat transition-delay

Xususiyyat transition-delay transition hamar transformasiyasinin baslamasindan evvel gecikme teyin edir.

Sintaksis

cssselektor {
  transition-delay: s ve ya ms ile vaxt;
}

Deyerler

Standart deyer: 0s.

Numune

Blokun uzerine sichqoncu gətirin - 3 saniye heç ne baş vermeyecek (3s gecikme var), sonra isə o enini 2 saniyede hamar deyişecek. Əgər sonra sichqonu kenara cəksəniz - yenə 3 saniye heç ne baş vermeyecek, sonra isə en hamar şəkildə azalaraq ilkin deyerine qayidacaq:

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

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

Результат:

Numune

Blokun uzerine sichqoncu gətirin - o evvelce enini 2 saniyede deyişecek, sonra isə hundurluyunu 4 saniyede deyişecek. Xususiyyetler ardicil olaraq deyişecek, çunki hundurluk ucun 3 saniye gecikme var (enin deyişme vaxti). Əgər sichqonu kenara cəksəniz - deyişiklikler ters ardicilliqla baş verəcək: evvel eni azalacaq, sonra isə hundurluyu azalacaq:

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

css#elem {
  border: 1px solid black;
  transition-duration: 2s, 4s;
  transition-property: width, height;
  transition-delay: 0s, 3s;
  width: 100px;
  height: 25px;
}
#elem:hover {
  width: 400px;
  height: 50px;
}

Результат:

Həmçinin bax