Omadus transition-delay

Omadus transition-delay määrab viivituse enne sujuba ülemineku transition käivitamist.

Süntaks

cssvalija {
  transition-delay: aeg s või ms;
}

Väärtused

Vaikeväärtus: 0s.

Näide

Liigutage kursorit ploki kohale - 3 sekundit midagi ei juhtu (on seatud viivitus 3s), seejärel muudab see sujuvalt oma laiust 2 sekundiga. Kui seejärel kursor eemaldada - siis jälle 3 sekundit midagi ei juhtu, seejärel väheneb laius sujuvalt algväärtuseni:

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

Результат:

Näide

Liigutage kursorit ploki kohale - see muudab esmalt oma laiust 2 sekundiga, seejärel muudab oma kõrgust 4 sekundiga. Omadused muutuvad järjestikku, kuna kõrgusele on seatud viivitus 3 sekundit (laiuse muutmise aeg). Kui kursor eemaldada - siis muutused toimuvad vastupidises järjekorras: esmalt väheneb laius, seejärel väheneb kõrgus:

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

Результат:

Vaata ka