transition-property xususiyati

transition-property xususiyati transition silliq o‘tishi bilan animatsiyalanadigan xususiyatni belgilaydi. Qiymat sifatida animatsiyalanadigan CSS xususiyatining nomini berish kerak. Agar all qiymati berilsa (standart qiymat) - barcha xususiyatlar bir vaqtda animatsiyalanadi.

Sintaksis

selector {
	transition-property: qiymat;
}

Misol

Blok ustiga sichqonchani olib boring - u transition-property ning width qiymatiga ega bo‘lgani uchun o‘zining enini silliq o‘zgartiradi:

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

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

Misol . All qiymati

Ushbu misolda transition-property all qiymatiga ega - shuning uchun hover holati uchun yozilgan barcha xususiyatlar (bizning holatda width va height) silliq o‘zgaradi. Barcha o‘zgarishlar transition-duration da belgilangan bir xil vaqt davomida amalga oshiriladi:

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

Shuningdek qarang

transition-duration xususiyati,
bu silliq o‘tish davomiyligini belgilaydi
transition-delay xususiyati,
bu silliq o‘tishdan oldin kechikishni belgilaydi
transition-timing-function xususiyati,
bu silliq o‘tish uchun vaqt funktsiyasini belgilaydi
transition xususiyati,
bu silliq o‘tish uchun qisqartma hisoblanadi
animation xususiyati,
bu orqali animatsiya yaratish mumkin