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 касиети,
анын жардамы менен анимация түзүүгө болот