Eienskap transition-delay

Die eienskap transition-delay stel 'n vertraging voor die begin van die vloeiende oorgang transition.

Sintaksis

cssselektor {
  transition-delay: tyd in s of ms;
}

Waardes

Verstekwaarde: 0s.

Voorbeeld

Beweeg die muis oor die blok - niks sal vir 3 sekondes gebeur nie (daar is 'n vertraging van 3s), en dan sal dit geleidelik sy breedte verander oor 2 sekondes. As jy dan die muis wegneem - sal weer niks vir 3 sekondes gebeur nie, en dan sal die breedte geleidelik verminder na die oorspronklike waarde:

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

Результат:

Voorbeeld

Beweeg die muis oor die blok - dit sal eers sy breedte verander oor 2 sekondes, en dan sy hoogte verander oor 4 sekondes. Die eienskappe sal opeenvolgend verander, aangesien daar 'n vertraging van 3 sekondes vir hoogte is (tyd van breedteverandering). As jy die muis wegneem - sal die veranderinge in die omgekeerde volgorde plaasvind: eers sal die breedte verminder, en dan sal die hoogte verminder:

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

Результат:

Sien ook