Animated CLose Button

by edwardantony

HTML

<div class="nav-icon">
  <span></span>
</div>

CSS

body{background:#000;}


.nav-icon {
cursor: pointer;
display: inline-block;
vertical-align: middle;
width: 3em;
  transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
}.nav-icon:after, 
.nav-icon:before, 
.nav-icon span  {
display: block;
  transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
  content: '';
margin: 7px 0;
  height: 5px;
  border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
  background-color: #fff;
}

.nav-icon:hover:before {
  transform: translateY(12px) rotate(135deg);
  -webkit-transform: translateY(12px) rotate(135deg);
-moz-transform: translateY(12px) rotate(135deg);
}
.nav-icon:hover:after {
  transform: translateY(-12px) rotate(-135deg);
  -moz-transform: translateY(-12px) rotate(-135deg);
  -webkit-transform: translateY(-12px) rotate(-135deg);
}

.nav-icon:hover span {
transform: scale(0);
-moz-transform: scale(0);
-webkit-transform: scale(0);
}