Как указать задержку для transition при hover?

Question

[Виталий Рыбченко]

Всем доброго дня!
Есть блок меню, он расширяется при наведении мыши

transition: width .30s linear;
width: 146px

но есть загвоздка - часто случайно его задеваешь, и раскрывается - хотелось бы сделать отложенную реакцию, например, чтобы он срабатывает через 1 секунду, если курсор стоит на блоке.

Вроде как есть специальные свойства css, которые устанавливают задержку, но у меня ни в Google Chrome, ни в Firefox это не работает:

-webkit-transition-delay: 2s;
-o-transition-delay: 2s;
transition-delay: 2s;

Что то делаю не так? Есть готовые решения на этот счет?

Answer 1

[Андрей Б.]

все работает

Comments

[Виталий Рыбченко]

Спасибо, Андрей - не знал что можно указать задержку в самом transition.

[Андрей Б.]

biovr Пожалуйста. Обратите внимание, что анимация в обратную сторону тоже с задержкой. Это можно исправить переместив transition в div:hover, тогда при отводе мыши див ужмется моментально.

[Виталий Рыбченко]

У меня так и есть, спасибо