CSS3 animation--仿写炫酷的下拉菜单

1.原文地址：15款手机端打开菜单动画过渡特效DEMO15

2.下面我们就仿着他的源码自己尝试写一下。不得不说由于是在移动端，这样的效果

确实是狂酷耍帅吊炸天的漂亮！

这动画效果看着简单，实际要我写，估计脑袋想破了也搞不定。

HTML：

<div class="menu">
			<div class="menu-header">
				<div class="menu-header-icon">
					<span></span>
					<span></span>
				</div>
			</div>

			<div class="menu-nav">
				<a>Home</a>
				<a>Services</a>
				<a>Portfolio</a>
				<a>Blog</a>
				<a>About</a>
				<a>Contact</a>
			</div>
		</div>

CSS：

body{
	font-family:"Helvetica";
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
.grid{
	background-image:-webkit-linear-gradient(top,
					transparent 49px,
					#bfbebe 50px),
					-webkit-linear-gradient(left,
					transparent 49px,
					#bfbebe 50px);

	background-size:50px 50px;
	background-repeat:repeat;
}

div{
	box-sizing:border-box;
}
.menu{
	position:relative;
}

.menu-header{
	position:absolute;
	width:100%;
	height:50px;
	top:0;
	left:0;
	background-color:rgba(0,0,0,0.7);
}

.menu-header-icon{
	position:relative;
	height:50px;
	width:50px;
	float:right;
}

.menu-header-icon span{
	position:absolute;
	width:25px;
	height:1px;
	background-color:rgba(255,255,255,1);
    left: calc((100% - 25px) / 2);     	/*居中黑科技*/
    top: calc((100% - 1px) / 2);       /*这里空格是必须的*/  
}

.menu-header-icon span:nth-child(1){
	-webkit-transform:translateY(-4px);
}

.menu-header-icon span:nth-child(2){
	-webkit-transform:translateY(4px);
}

/*编写入场动画*/
@keyframes in-first{
	0% {-webkit-transform:translateY(4px) rotate(0deg);}

	100%{-webkit-transform:translateY(0px) rotate(45deg);}
}

@keyframes in-second{
	0% {-webkit-transform:translateY(-4px) rotate(0deg);}

	100%{-webkit-transform:translateY(0px) rotate(-45deg);}
}

/*编写出场动画*/
@keyframes out-first{
	0% {-webkit-transform:translateY(0) rotate(-45deg);}

	100%{-webkit-transform:translateY(-4px) rotate(0deg);}
}

@keyframes out-second{
	0% {-webkit-transform:translateY(0) rotate(45deg);}

	100%{-webkit-transform:translateY(4px) rotate(0deg);}
}


.menu-header-icon-one-in{
	-webkit-animation-name:in-first;
	-webkit-animation-duration:0.5s;
	-webkit-animation-fill-mode:forwards;
}

.menu-header-icon-two-in{
	-webkit-animation-name:in-second;
	-webkit-animation-duration:0.5s;
	-webkit-animation-fill-mode:forwards;
}

.menu-header-icon-one-out{
	-webkit-animation-name:out-first;
	-webkit-animation-duration:0.5s;
	-webkit-animation-fill-mode:forwards;
}

.menu-header-icon-two-out{
	-webkit-animation-name:out-second;
	-webkit-animation-duration:0.5s;
	-webkit-animation-fill-mode:forwards;
}


/*展开菜单动画*/
.menu-nav{
	background-color: rgba(0,0,0,0.9);
    width: 100%;
    position: absolute;
    top: 50px;
    left: 0px;
    padding-top: 30px;
    padding-bottom: 80px;
    display:none;
}

.menu-nav a{
    line-height: 50px;
    text-decoration: none;
    width: 80%;
    margin-left: 10%;
    color: #FFFFFF;
    position: relative;
    display: block;
    border: none !important;
}

.menu-nav a::after{
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:1px;
	background-color:rgba(255,255,255,0.3);

	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name:slideInBorder;
	animation-name:slideInBorder;
}

.menu-nav a:nth-child(1)::after
{
	-webkit-animation-delay:0s;
}

.menu-nav a:nth-child(2)::after
{
	-webkit-animation-delay:0.1s;
}

.menu-nav a:nth-child(3)::after
{
	-webkit-animation-delay:0.2s;
}

.menu-nav a:nth-child(4)::after
{
	-webkit-animation-delay:0.3s;
}

.menu-nav a:nth-child(5)::after
{
	-webkit-animation-delay:0.4s;
}

.menu-nav a:nth-child(6)::after
{
	-webkit-animation-delay:0.5s;
}
	



/*菜单线条动画*/

@-webkit-keyframes slideInBorder {
0%{
	-webkit-transform: translate(52%, -24px) scaleY(0.07) rotate(90deg);
	transform: translate(52%, -24px) scaleY(0.07) rotate(90deg);
	}
100%{
	-webkit-transform: translate(0, 0) scaleY(1) rotate(0deg);
	transform: translate(0, 0) scaleY(1) rotate(0deg);
	}	

}

JS：

$(".menu-header-icon").click(function(){
	if($(".menu-header-icon span:nth-child(1)").
		hasClass("menu-header-icon-one-in"))
	{
		iconOut();
		navOut();
	}
	else
	{
		iconIn();
		navIn();
	}
});

function iconIn(){
	$(".menu-header-icon span:nth-child(1)").
		attr("class","menu-header-icon-one-in");
	$(".menu-header-icon span:nth-child(2)").
		attr("class","menu-header-icon-two-in");
}

function iconOut(){
	$(".menu-header-icon span:nth-child(1)").
		attr("class","menu-header-icon-one-out");
	$(".menu-header-icon span:nth-child(2)").
		attr("class","menu-header-icon-two-out");
}

function navIn(){
	$(".menu-nav").slideDown(400);
}

function navOut(){
	$(".menu-nav").slideUp(400);
}


$(".test").click(function(){
	$(this).toggleClass("test-one test-two");
});