Menu Anim Popup

jquery,html,css

HTML

<div id="ui-menu-bar">
<div class="ui-menu-bar-red"></div>
<div class="ui-menu-bar-white"></div>
<div class="ui-menu-bar-blue"></div>
</div>

<div id='menu-bg'>
some menu stuffs  
</div>

CSS

*{background:#000;}
#ui-menu-bar {position:absolute; width:62px; height:29px; top:26px; left:26px; cursor:pointer;}

@keyframes menu-open{
0% {transform:rotateZ(0deg) scale3d(.5,.5,.5); opacity:0.5;}
100% {transform:rotateZ(360deg) scale3d(1,1,1); opacity:1;}
}

@keyframes menu-close{
0% {transform:rotateZ(360deg) scale3d(.5,.5,.5); opacity:0.5;}
100% {transform:rotateZ(0deg) scale3d(1,1,1); opacity:1;}
}

.ui-menu-bar-red {width:62px; height:5px; background:#ff1800; margin-bottom:7px;}
.ui-menu-bar-white {width:62px; height:5px; background:#fff; margin-bottom:7px;}
.ui-menu-bar-blue {width:62px; height:5px; background:#00a8ff;}

.ui-menu-animate-open{animation: menu-open .6s ease-in-out;}
.ui-menu-animate-close{animation: menu-close .6s ease-in-out;}

#menu-bg {position:absolute; width:20%; padding:40px; background:#515151; color:#fff; top:100px; display:none; text-align:center;}

JavaScript

$("#ui-menu-bar").click(function() {
if ($('#menu-bg').is(":hidden")) {
$('#menu-bg').show(200);
$('#ui-menu-bar').addClass('ui-menu-animate-open');
} else {
if ($('#menu-bg').is(":visible")) {
$('#menu-bg').hide(200);
$('#ui-menu-bar').addClass('ui-menu-animate-close');
}
}
$('#ui-menu-bar').on("animationend", function() {
$('#ui-menu-bar').removeClass('ui-menu-animate-open');
$('#ui-menu-bar').removeClass('ui-menu-animate-close');
});
});