A transition-delay tulajdonság

A transition-delay tulajdonság beállítja a késleltetést az átmenet elindítása előtt transition.

Szintaxis

cssselector {
  transition-delay: idő s vagy ms ban;
}

Értékek

Alapértelmezett érték: 0s.

Példa

Vigyéda az egérmutatót a blokkra - 3 másodpercig semmi sem fog történni (van egy 3s késleltetés), majd a blokk simán megváltoztatja a szélességét 2 másodperc alatt. Ha ezután elvisszük az egeret - ismét 3 másodpercig semmi sem fog történni, majd a szélesség simán csökken az eredeti értékre:

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

Результат:

Példa

Vigyéda az egérmutatót a blokkra - először megváltoztatja a szélességét 2 másodperc alatt, majd megváltoztatja a magasságát 4 másodperc alatt. A tulajdonságok egymás után fognak változni, mivel a magassághoz beállított késleltetés 3 másodperc (a szélességváltozás ideje). Ha elvisszük az egeret - akkor a változások fordított sorrendben történnek: először csökken a szélesség, majd csökken a magasság:

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

Результат:

Lásd még