Egenskapen transition-delay

Egenskapen transition-delay sätter en fördröjning innan start av den mjuka övergången transition.

Syntax

cssselektor {
  transition-delay: tid i s eller ms;
}

Värden

Standardvärde: 0s.

Exempel

För musen över blocket - 3 sekunder kommer inget att hända (det finns en fördröjning på 3s), och sedan kommer det smidigt ändra sin bredd under 2 sekunder. Om du sedan tar bort musen - så kommer igen 3 sekunder inget att hända, och sedan kommer bredden minska smidigt till ursprungsvärdet:

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

Результат:

Exempel

För musen över blocket - det kommer först ändra sin bredd under 2 sekunder, och sedan kommer det ändra sin höjd under 4 sekunder. Egenskaperna kommer ändras i följd, eftersom för höjden är satt till 3 sekunder (tiden för breddändringen). Om du tar bort musen - så kommer ändringarna ske i omvänd ordning: först minskar bredden, och sedan minskar höjden:

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

Результат:

Se även