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