Својство 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,
со кое може да се направи анимација