How to make animation on loss of focus?

Question

css

There is the following construction: sandbox
With hoverdiv , the submenu changes from to and the animation is triggered: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;
       }
    }

But it only works on hover, but not on loss of focus, how to fix it?

Answer 1

With display: none; you will not do reverse animation, but with visibility: hidden; and transition is easy to repeat: