css animation with jquery on enter and leave

I have a jquery which is adding animation class on mouse enter and add another class when mouse leaves element, basically i want In and Out animation. Im achieving fading In animation but when i leave with mouse, the element disappears without animation. So only showing is animated but not the leaving.

JQEURY

$('.menu > ul > li').on({
            mouseenter: function () {
                if (getWindowWidth() >= responsiveBreakpoint) {
                    $(this).children('ul').removeClass('fadeOutUp').addClass('fadeInDown');
                }
            },
            mouseleave: function () {
                if (getWindowWidth() >= responsiveBreakpoint) {
                    $(this).children('ul').removeClass('fadeInDown').addClass('fadeOutUp');
                }
            }
        });

CSS

@keyframes fadeInDown {
  from {
    display: none;
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }

  to {
    display: block;
    opacity: 1;
    transform: none;
  }
}

.fadeInDown {
  animation: .2s ease;
  animation-name: fadeInDown;
}

@keyframes fadeOutUp {
  from {
    display: block;
    opacity: 1;
    transform: none;
  }

  to {
    display: none;
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }
}

.fadeOutUp {
  animation: .2s ease;
  animation-name: fadeOutUp;
}

And element which im trying to animate is styled like this:

> ul {
        display: none;
        position: absolute;
        z-index: 99;
        left: 0;
        width: 100%;
        background: $hover-and-dropdown-bg;
}