Својство 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;
}

Результат:

Погледајте такође