Свойство transition-property

Свойство transition-property ўзгариш transition орқали мулосимлаштириладиган CSS хоссасини белгилайди. Қиймат сифатида мулосимлаштириладиган 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 хоссаси,
ўзгаришдан олдинги кутish вақтини белгилайди
transition-timing-function хоссаси,
ўзгариш учун вақт функциясини белгилайди
transition хоссаси,
ўзгариш учун қисқартирилған хосса
animation хоссаси,
анимация яратиш учун ишлатилади