CSS: как задержать анимацию?

Question

[Shimpanze]

Добрый день!

Делаю плавное появление пункта меню с помощью свойства opacity:

nav#menu > ul > li > ul {
  position: absolute;
  top: -10000rem;
  opacity: 0;
  transition: opacity .5s;
}

nav#menu > ul > li:hover > ul {
  position: static;
  top: 0; /* как задержать здесь это действие на 0.5s ? */
  opacity: 1;
}

Скажите, пожалуйста, как сделать, чтобы свойство top не срабатывало половину секунды после убратия мышки? Как установить для свойства top задержку?

Спасибо!

Answer 1

[Stalker_RED]

transition: top 1s 5s; /* длительность анимации 1сек, задержка ПЕРЕД анимацией 5сек */

Comments

[Александр Вульф]

также можно использовать transition-delay: 5s;