Свойство transition-delay

Свойство transition-delay transition жылма-жылма өтүү башталардан мурун күтүү убактысын белгилейт.

Синтаксис

cssселектор {
  transition-delay: убакыт s же ms менен;
}

Маанилер

Демейки маани: 0s.

Мисал

Блокко чычкан курсорун алып келгиле - 3 секунд эч нерсе болбойт (3s күтүү коюлган), андан кийин ал өзүнүн туурасын 2 секунд ичинде жылма-жылма өзгөртөт. Эгер андан кийин курсорду алып кетсеңиз - анда дагы 3 секунд эч нерсе болбойт, андан кийин туура жылма-жылма баштапкы маанисине чейин кичирейет:

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

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

Результат:

Мисал

Блокко чычкан курсорун алып келгиле - ал адегенде өзүнүн туурасын 2 секунд ичинде өзгөртөт, андан кийин өзүнүн бийиктигин 4 секунд ичинде өзгөртөт. Касиеттер ирети менен өзгөрөт, анткени бийиктикке 3 секунд күтүү коюлган (туура өзгөрүү убактысы). Эгер курсорду алып кетсеңиз - анда өзгөрүүлөр тескери тартипте болот: адегенде туура кичирейет, андан кийин бийиктик кичирейет:

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

css#elem {
  border: 1px solid black;
  transition-duration: 2s, 4s;
  transition-property: width, height;
  transition-delay: 0s, 3s;
  width: 100px;
  height: 25px;
}
#elem:hover {
  width: 400px;
  height: 50px;
}

Результат:

Ошондой эле караңыз