Click the navigation icon below to start the animation.

Here is the HTML

<div id="navigation-container" data-component="navigation">
	<div id="icon-container">
		<div class="nav-icon top"></div>
		<div class="nav-icon middle"></div>
		<div class="nav-icon bottom"></div>
	</div>
</div>

Here is the CSS

#navigation-container {
	cursor:pointer;
}

#icon-container {
	cursor:pointer;
	padding:5px;
	display:inline-block;
	margin:4em auto 0 auto;
	position:relative;
}

#icon-container div.nav-icon {
	width:20px;
	height:3px;
	background:#000;
	cursor: pointer;
	position:absolute;
}

#icon-container div.nav-icon.top {
	top:0;
}

#icon-container div.nav-icon.middle {
	top:6px;
}

#icon-container div.nav-icon.bottom {
	top:12px;
}

/* animation styles */

#icon-container div.nav-icon.top.close {
	-webkit-animation-duration: .25s;
  animation-duration: .25s;
  -webkit-animation-name: morphTop;
  animation-name: morphTop;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

#icon-container div.nav-icon.middle.close {
	-webkit-animation-duration: .25s;
  animation-duration: .25s;
  -webkit-animation-name: morphMiddle;
  animation-name: morphMiddle;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

#icon-container div.nav-icon.bottom.close {
	-webkit-animation-duration: .25s;
  animation-duration: .25s;
  -webkit-animation-name: morphBottom;
  animation-name: morphBottom;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@keyframes morphTop {
  from {
    top:0;
    transform: rotate(0deg);
  }
  to {
    top:6px;
    transform: rotate(-45deg);
  }
}

@-webkit-keyframes morphTop {
  from {
    top:0;
    transform: rotate(0deg);
  }
  to {
    top:6px;
    transform: rotate(-45deg);
  }
}

@keyframes morphMiddle {
  from {
    opacity:1;
  }
  to {
    opacity:0;
  }
}
@-webkit-keyframes morphMiddle {
  from {
    opacity:1;
  }
  to {
    opacity:0;
  }
}

@keyframes morphBottom {
  from {
    top:12px;
    transform: rotate(0deg);
  }
  to {
    top:6px;
    transform: rotate(45deg);
  }
}
@-webkit-keyframes morphBottom {
  from {
    top:12px;
    transform: rotate(0deg);
  }
  to {
    top:6px;
    transform: rotate(45deg);
  }
}

Lastly, here is the JavaScript

var poz = {
	navigation: function() {
		var container = document.getElementById("navigation-container");
		var iconLines = document.getElementsByClassName("nav-icon");
		container.addEventListener("click", function() {
			for (var a=0; a < iconLines.length; a++) {
				iconLines[a].classList.add("close");
			}
			container.classList.add("open");
		});	
	},
	init: function() {
		poz.navigation();
	}
}

window.addEventListener("load", function() {
	poz.init();
})