Star Wars Toggle Icon Animation @ http://codepen.io/rss/pen/vIDKH

css.css

body{
	background:#222;
	padding: 100px;
	font-size: 10px; /*increase me to scale toogle-icon*/
}

#nav-container{
	position: absolute;
	top: 50%;
	left: 50%;
	margin:-3em;
}

/*toggle-icon*/
.toggle-icon {
	display: block;
	position: relative;
	width: 100%;
	margin: -2.2em auto 0 0.2em;
	-webkit-transition: margin 600ms;
	-moz-transition: margin 600ms;
	transition: margin 600ms;
	cursor: pointer;
}

.toggle-icon .bar {
	display: block;
	width: 3.8em;
	height: 0.2em;
	margin: 0.9em;
	border-right: 2.8em solid #fff;
	border-left: 0.6em solid #d6d6d6;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition-property: -webkit-transform, margin, border-right-color, box-shadow;
	-moz-transition-property: -moz-transform, margin, border-right-color, box-shadow;
	transition-property: transform, margin, border-right-color, box-shadow;
	-webkit-transition-duration: 600ms;
	-moz-transition-duration: 600ms;
	transition-duration: 600ms;
}
	.toggle-icon .bar:nth-of-type(1) {
		-webkit-transition: opacity 300ms;
		-moz-transition: opacity 300ms;
		transition: opacity 300ms;
	}
	.toggle-icon .bar:nth-of-type(2) {
		-webkit-transform: rotate(-180deg);
		-moz-transform: rotate(-180deg);
		-ms-transform: rotate(-180deg);
		-o-transform: rotate(-180deg);
		transform: rotate(-180deg);
	}

/*pushed*/
.pushed .toggle-icon {
	margin: -3.2em 0 0 0.7em;
}

	.pushed .bar:nth-of-type(1) {
		opacity: 0;
	}

	.pushed .bar:nth-of-type(2) {
		margin-left: 1.4em;
		-webkit-transform: rotate(-137deg) translateY(-1.5em);
		-moz-transform: rotate(-137deg) translateY(-1.5em);
		-ms-transform: rotate(-137deg) translateY(-1.5em);
		-o-transform: rotate(-137deg) translateY(-1.5em);
		transform: rotate(-137deg) translateY(-1.5em);
	}

	.pushed .bar:nth-of-type(3) {
		margin-left: 0.5em;
		-webkit-transform: rotate(-42deg);
		-moz-transform: rotate(-42deg);
		-ms-transform: rotate(-42deg);
		-o-transform: rotate(-42deg);
		transform: rotate(-42deg);
	}


.pushed .toggle-icon:hover .bar:nth-of-type(2) {
	border-right-color: #e9b8b9;
	box-shadow: 0.4em 0 0.6em 0.1em rgba(205,40,44,0.75);
}
.pushed .toggle-icon:hover .bar:nth-of-type(3) {
	border-right-color: #ddf1da;
	box-shadow: 0.4em 0 0.6em 0.1em rgba(83,228,68,0.65);
}

html.html

<div id="nav-container">
  <div class="toggle-icon">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </div><!-- /toggle-icon -->
</div><!-- /nav-container -->

js.js

$(".toggle-icon").click(function() {
  $('#nav-container').toggleClass("pushed");
});


/*** starwars.com's Toggle Icon Animation ***/