CSS3 animation--the cool pull-down menu

1. Original address: 15 mobile phone-side Open Menu animation transition effect DEMO15

2. Below we will imitate his source code to try to write. Have to say because it is on the moving end, such an effect

It's really cool, it's nice to hang the sky.

This animation effect looks simple, actually wants me to write, estimated the head wants to break also does not have the uncertainty.

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-gra

	Dient (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);       * Center Black Technology * * TOP:CALC (100%-1px)/2);

* * Here the space is required */}. Menu-header-icon Span:nth-child (1) {-webkit-transform:translatey ( -4px);}

. Menu-header-icon Span:nth-child (2) {-webkit-transform:translatey (4px);} /* Write admission animation/@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);}}

	/* Write an appearance animation/@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;
    /* Expand Menu Animation/* 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;}
	/* Menu Line Animation/@-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 ();

function Navout () {
	$ (". Menu-nav"). Slideup ();


$ (". Test"). Click (function () {
	$ (this). Toggleclass ("Test-one test-two");
});