CSS show/hide animation

script.js

// User HoverIntent
$(".dropdown-menu .menu-item-has-children").hoverIntent(
	function(){
		var isMega = $(this).hasClass("mega-menu");
		var sub    = $(this).find("> .sub-menu");

		if( isMega ){
			$(sub).css("display","table");
		} else {
			$(sub).show();
		}
		$(sub).addClass("sub-menu--open sub-menu--open-in")
		$(sub).one("animationend webkitAnimationEnd", function() {
			$(this).removeClass("sub-menu--open-in");
		});
	},
	function(){

		var sub = $(this).find("> .sub-menu");
		$(sub).hide();
		$(sub).addClass("sub-menu--open-out");
		$(sub).removeClass("sub-menu--open");
		$(sub).one("animationend webkitAnimationEnd", function() {
			$(this).removeClass("sub-menu--open-out");
		});
	}
);

style.scss

.sub-menu{
	&--open{ display: block }
	&--open-in{
		animation: menu-fadeInUp .2s ease-out;
	}
	&--open-out{
		display: block!important;
		animation: menu-fadeInUp reverse .2s ease-out;
	}
}

@keyframes menu-fadeInUp{
	0% {
		transform: translate3d(0,-10px,0);
		opacity: 0;
	}
	100% {
		transform: translate3d(0,0,0);
		opacity: 1;
	}
}