Sifat transition-property

Sifat transition-property menetapkan sifat yang akan dianimasikan dengan peralihan lancar transition. Nilai yang harus diberikan ialah nama sifat CSS yang akan dianimasikan. Jika nilai all diberikan (ia ditetapkan secara lalai) - semua sifat akan dianimasikan sekaligus.

Sintaks

selector {
	transition-property: nilai;
}

Contoh

Letakkan kursor tetikus di atas blok - ia akan mengubah lebarnya secara lancar, kerana transition-property mempunyai nilai width:

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

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

Contoh . Nilai all

Dalam contoh ini transition-property mempunyai nilai all - oleh itu semua sifat yang ditulis untuk keadaan hover akan berubah secara lancar (dalam kes kami ini ialah width dan height). Semua perubahan akan berlaku dalam masa yang sama, yang ditetapkan dalam 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;
}

Lihat juga

sifat transition-duration,
yang menetapkan tempoh peralihan lancar
sifat transition-delay,
yang menetapkan kelewatan sebelum peralihan lancar
sifat transition-timing-function,
yang menetapkan fungsi masa untuk peralihan lancar
sifat transition,
yang merupakan singkatan untuk peralihan lancar
sifat animation,
yang boleh digunakan untuk membuat animasi