Уласцівасць 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,
з дапамогай якога можна зрабіць анімацыю