Egenskapen transition-property

Egenskapen transition-property ställer in vilken egenskap som ska animeras med en mjuk övergång transition. Som värde ska man skicka namnet på den CSS-egenskap som ska animeras. Om man sätter värdet all (det är satt som standard) - kommer alla egenskaper att animeras samtidigt.

Syntax

selektor {
	transition-property: värde;
}

Exempel

För musen över blocket - det kommer smidigt att ändra sin bredd, eftersom transition-property har värdet width:

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

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

Exempel . Värdet all

I detta exempel har transition-property värdet all - därför kommer alla egenskaper som skrivits för tillståndet hover (i vårt fall är det width och height) att förändras mjukt. Alla förändringar kommer att ske under samma tid, som anges i 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;
}

Se även

egenskapen transition-duration,
som anger varaktigheten för den mjuka övergången
egenskapen transition-delay,
som anger fördröjningen före den mjuka övergången
egenskapen transition-timing-function,
som anger tidsfunktionen för den mjuka övergången
egenskapen transition,
som är en förkortning för den mjuka övergången
egenskapen animation,
som kan användas för att skapa animation