Vetia transition-property

Vetia transition-property përcakton vetinë që do të animohet me një tranzicion të qetë transition. Si vlerë duhet të kalohet emri i vetisë CSS që do të animohet. Nëse caktohet vlera all (është vlera e paracaktuar) - do të animohen të gjitha vetitë njëkohësisht.

Sintaksa

përzgjedhësi {
	transition-property: vlera;
}

Shembull

Vendose miun mbi bllok - ai do të ndryshojë gjerësinë e tij në mënyrë të qetë, pasi transition-property ka vlerën width:

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

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

Shembull . Vlera all

Në këtë shembull transition-property ka vlerën all - prandaj në mënyrë të qetë do të ndryshojnë të gjitha vetitë e shkruara për gjendjen hover (në rastin tonë këto janë width dhe height). Të gjitha ndryshimet do të kryhen për të njëjtën kohë, e cila është caktuar në transition-duration:

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

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

Shihni gjithashtu

vetia transition-duration,
e cila përcakton kohëzgjatjen e tranzicionit të qetë
vetia transition-delay,
e cila përcakton vonesën para 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ë krijohet animacion