Уласцівасць 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;
}

Результат:

Глядзіце таксама