Transition қасиеті

transition қасиеті - бұл жұмсақ өтулер үшін қысқартылған қасиет, бір уақытта transition-duration, transition-property, transition-timing-function және transition-delay қасиеттерін белгілеуге мүмкіндік береді.

Синтаксис

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

Қасиеттердің реті маңызды емес, дегенмен орындалу уақыты (transition-duration) кешіктірудің (transition-delay) алдында тұруы керек.

Мәндер

Сәйкес қасиеттерге қараңыз. Әдепкі мән: all 0s ease 0s.

none мәні барлық өтулерді жояды (олар лезде орындалады).

Мысал

Блоктың үстіне тінтуірді апарыңыз - 3 секунд ештеме болмайды (3s кешіктіру бар), содан кейін ол енін 2 секундта біртіндеп өзгертеді. Егер тінтуірді алып кетсеңіз - тағы 3 секунд ештеме болмайды, содан кейін ен біртіндеп бастапқы мәніне дейін азаяды:

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

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

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

animation қасиеті,
оның көмегімен анимация жасауға болады