Свойство transition

Свойство transition е съкращение за плавни преходи, позволява едновременно да се зададе transition-duration, transition-property, transition-timing-function и transition-delay.

Синтаксис

cssселектор {
  transition: стойност;
}

Редът на свойствата няма значение, обаче времето за изпълнение (transition-duration) трябва да е преди закъснението (transition-delay).

Стойности

Вижте съответните свойства. Стойност по подразбиране: all 0s ease 0s.

Стойността none отменя всички преходи (те ще стават мигновено).

Пример

Задръжте мишката върху блока - 3 секунди няма да се случи нищо (има закъснение от 3s), след което той плавно ще промени ширината си за 2 секунди. Ако след това махнете мишката - отново 3 секунди няма да се случи нищо, след което ширината плавно ще намалее до оригиналната стойност:

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

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

Результат:

Вижте също