Eigenschap transition-delay

De eigenschap transition-delay stelt een vertraging in voor het starten van de vloeiende overgang transition.

Syntaxis

cssselector {
  transition-delay: tijd in s of ms;
}

Waarden

Standaardwaarde: 0s.

Voorbeeld

Beweeg de muis over het blok - er zal 3 seconde niets gebeuren (er is een vertraging van 3s ingesteld), en daarna zal het soepel zijn breedte wijzigen gedurende 2 seconden. Als je de muis vervolgens wegneemt - zal er weer 3 seconde niets gebeuren, en daarna zal de breedte soepel afnemen naar de oorspronkelijke 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 de muis over het blok - het zal eerst zijn breedte wijzigen gedurende 2 seconden, en daarna zijn hoogte wijzigen gedurende 4 seconden. De eigenschappen zullen opeenvolgend wijzigen, omdat voor de hoogte een vertraging van 3 seconde is ingesteld (de wijzigingstijd van de breedte). Als je de muis wegneemt - zullen de wijzigingen in omgekeerde volgorde plaatsvinden: eerst neemt de breedte af, en daarna neemt de hoogte af:

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

Результат:

Zie ook