Vetia transition-delay

Vetia transition-delay vendos një vonesë përpara fillimit të tranzicionit të qetë transition.

Sintaksa

selektori {
	transition-delay: kohë në s ose ms;
}

Vlerat

Vlera	Përshkrimi
`s`	Përcakton kohën në sekonda (p.sh. `3s`). Mund të përcaktohen vlera thyesore, për shembull, `0.5s` - gjysmë sekonde.
`ms`	Përcakton kohën në milisekonda (p.sh. `3ms`). Një sekondë është `1000` milisekonda.

Vlera e paracaktuar: 0s.

Shembull

Vendosni miun mbi bllok - për 3 sekonda nuk do të ndodhë asgjë (ekziston një vonesë prej 3s), dhe pastaj ai do të ndryshojë pa probleme gjerësinë e tij për 2 sekonda. Nëse pastaj hiqni miun - përsëri për 3 sekonda nuk do të ndodhë asgjë, dhe pastaj gjerësia do të ulet pa probleme në vlerën fillestare:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	transition-duration: 2s;
	transition-property: width;
	transition-delay: 3s;
	height: 50px;
	width: 100px;
}
#elem:hover {
	width: 400px;
}

Shembull

Vendosni miun mbi bllok - ai fillimisht do të ndryshojë gjerësinë e tij për 2 sekonda, dhe pastaj do të ndryshojë lartësinë e tij për 4 sekonda. Vetitë do të ndryshojnë në mënyrë sekuenciale, pasi për lartësinë është vendosur një vonesë prej 3 sekondash (koha e ndryshimit të gjerësisë). Nëse hiqni miun - atëherë ndryshimet do të ndodhin në rend të kundërt: së pari do të ulet gjerësia, dhe pastaj do të ulet lartësia:

<div id="elem"></div>

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

Shihni gjithashtu

vetia transition-property,
e cila përcakton emrin e vetisë për tranzicion të qetë
vetia transition-duration,
e cila përcakton kohëzgjatjen e tranzicionit të qetë
vetia transition-timing-function,
e cila përcakton funksionin kohor për tranzicionin e qetë
vetia transition,
e cila është një shkurtim për tranzicionin e qetë
vetia animation,
me të cilën mund të bëhet animacion