Svojstvo transition-delay

Svojstvo transition-delay postavlja odlaganje pre pokretanja prelaza transition.

Sintaksa

cssselektor {
  transition-delay: vreme u s ili ms;
}

Vrednosti

Podrazumevana vrednost: 0s.

Primer

Pređite mišem preko bloka - 3 sekunde ništa se neće događati (postavljeno je odlaganje od 3s), a zatim će on postepeno promeniti svoju širinu za 2 sekunde. Ako zatim sklonite miš - opet će 3 sekunde ništa da se dešava, a zatim će se širina postepeno smanjiti na početnu vrednost:

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;
}

Результат:

Primer

Pređite mišem preko bloka - on će prvo promeniti svoju širinu za 2 sekunde, a zatim će promeniti svoju visinu za 4 sekunde. Svojstva će se menjati uzastopno, pošto je za visinu postavljeno odlaganje od 3 sekunde (vreme promene širine). Ako sklonite miš - promene će se desiti obrnutim redosledom: prvo će se smanjiti širina, a zatim će se smanjiti visina:

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;
}

Результат:

Pogledajte takođe