transition-property қасиеті

transition-property қасиеті transition болашақ үшін біртіндеп өзгеретін анимацияланатын қасиетті орнатады. Мәні ретінде анимацияланатын CSS қасиетінің аты берілуі керек. Егер all мәні берілсе (әдепкі бойынша орнатылған) - барлық қасиеттер бірден анимацияланады.

Синтаксис

селектор {
	transition-property: мән;
}

Мысал

Блоктың үстіне тінтуірді апарғанда - оның ені біртіндеп өзгереді, себебі transition-property width мәніне ие:

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

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

Мысал . all мәні

Бұл мысалда transition-property all мәніне ие - сондықтан біртіндеп hover үшін жазылған барлық қасиеттер өзгереді (біздің жағдайда бұл width және height). Барлық өзгерістер 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;
}

Сондай-ақ қараңыз

transition-duration қасиеті,
ол болашақ үшін біртіндеп өзгерудің ұзақтығын орнатады
transition-delay қасиеті,
ол болашақ үшін біртіндеп өзгерудің кешігуді орнатады
transition-timing-function қасиеті,
ол болашақ үшін біртіндеп өзгерудің уақыт функциясын орнатады
transition қасиеті,
ол болашақ үшін біртіндеп өзгерудің қысқартылған нұсқасы болып табылады
animation қасиеті,
ол анимация жасауға мүмкіндік береді