Как сделать анимацию при потере фокуса?

Question

[uRoot]

Есть следующая конструкция: песочница
При hoverdiv подменю меняется с display: none; на display: block; и срабатывает анимация:

animation: slide-top 0.3s ease-in-out both;
@keyframes slide-top {
    0% {
       transform: translateY(30px);
       opacity: 0;
    }
    100% {
       transform: translateY(0);
       opacity: 1;
       }
    }

Но она работает только при наведении, а при потере фокуса нет, как это исправить?

Comments

[Rustam Bainazarov]

Сделайте без анимации. Типа так:

.parent .element {
opacity: 0;
visibility: hidden;
transform: translateY(30px);
transition: transform .2s, opacity .2s, visibility .2s;
}

.parent:hover .element {
visibility: visible;
opacity: 1;
transform: none;
}

Нет возможности поправить ваш код, просто сделайте по подобию.

Answer 1

[Виталий Першин]

С display: none; обратную анимацию вы не сделаете, а вот с visibility: hidden; и transition повторить это легко: