Animated Manu display using css

Below i share html and css for making animated menu

HTML:

<h1>Menu</h1>
<h2>Using CSS </h2>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<nav class="menu">
  <input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open"/>
  <label class="menu-open-button" for="menu-open">
    <span class="hamburger hamburger-1"></span>
    <span class="hamburger hamburger-2"></span>
    <span class="hamburger hamburger-3"></span>
  </label>  
  <a href="#" class="menu-item"> <i class="fa fa-bar-chart"></i> </a>
  <a href="#" class="menu-item"> <i class="fa fa-plus"></i> </a>
  <a href="#" class="menu-item"> <i class="fa fa-heart"></i> </a>
  <a href="#" class="menu-item"> <i class="fa fa-envelope"></i> </a>
  <a href="#" class="menu-item"> <i class="fa fa-cog"></i> </a>
</nav>

CSS:

body {

  background:#b9c2f7;

  color: black;

  text-align: center;}

a {

  color: inherit;

}

h1, h2, h3, h4 {

  margin: 0;

  margin-bottom: 10px;

  margin-top: 10px;

}

h1 {

  font-size: 3em;

}

.menu {

  -webkit-filter: url("#shadowed-goo");

          filter: url("#shadowed-goo");

}

.menu-item, .menu-open-button {

  background:#1227a2;

  border-radius: 100%;

  width: 80px;

  height: 80px;

  margin-left: -40px;

  position: absolute;

  top: 20px;

  color: black;

  text-align: center;

  line-height: 80px;

  -webkit-transform: translate3d(0, 0, 0);

          transform: translate3d(0, 0, 0);

  transition: -webkit-transform ease-out 200ms;

  transition: transform ease-out 200ms;

  transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;

}

.menu-open {

  display: none;

}

.hamburger {

  width: 25px;

  height: 3px;

  background: black;

  display: block;

  position: absolute;

  top: 50%;

  left: 50%;

  margin-left: -12.5px;

  margin-top: -1.5px;

  transition: -webkit-transform 200ms;

  transition: transform 200ms;

  transition: transform 200ms, -webkit-transform 200ms;

}

.menu-open:checked + .menu-open-button .hamburger-1 {

  -webkit-transform: translate3d(0, 0, 0) rotate(45deg);

          transform: translate3d(0, 0, 0) rotate(45deg);

}.menu-open:checked + .menu-open-button .hamburger-2 {

  -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);

          transform: translate3d(0, 0, 0) scale(0.1, 1);

}.menu-open:checked + .menu-open-button .hamburger-3 {

  -webkit-transform: translate3d(0, 0, 0) rotate(-45deg);

          transform: translate3d(0, 0, 0) rotate(-45deg);

}

.menu {

  position: absolute;

  left: 50%;

  margin-left: -190px;

  padding-top: 20px;

  padding-left: 190px;

  width: 380px;

  height: 250px;

  box-sizing: border-box;

  font-size: 20px;

  text-align: left;

}

.menu-item:hover {

  background: gray;

  color: orange;

}

.menu-item:nth-child(3) {

  transition-duration: 70ms;

}

.menu-item:nth-child(4) {

  transition-duration: 130ms;

}

.menu-item:nth-child(5) {

  transition-duration: 190ms;

}

.menu-item:nth-child(6) {

  transition-duration: 250ms;

}

.menu-item:nth-child(7) {

  transition-duration: 310ms;

}

.menu-open-button {

  z-index: 2;

  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  transition-duration: 400ms;

  -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);

          transform: scale(1.1, 1.1) translate3d(0, 0, 0);

  cursor: pointer;

}

.menu-open-button:hover {

  -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);

          transform: scale(1.2, 1.2) translate3d(0, 0, 0);

}

.menu-open:checked + .menu-open-button {

  transition-timing-function: linear;

  transition-duration: 200ms;

  -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);

          transform: scale(0.8, 0.8) translate3d(0, 0, 0);

}

.menu-open:checked ~ .menu-item {

  transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);

}

.menu-open:checked ~ .menu-item:nth-child(3) {

  transition-duration: 160ms;

  -webkit-transform: translate3d(114.42548px, 11.48084px, 0);

          transform: translate3d(114.42548px, 11.48084px, 0);

}

.menu-open:checked ~ .menu-item:nth-child(4) {

  transition-duration: 240ms;

  -webkit-transform: translate3d(77.18543px, 85.2491px, 0);

          transform: translate3d(77.18543px, 85.2491px, 0);

}

.menu-open:checked ~ .menu-item:nth-child(5) {

  transition-duration: 320ms;

  -webkit-transform: translate3d(0.09158px, 114.99996px, 0);

          transform: translate3d(0.09158px, 114.99996px, 0);

}

.menu-open:checked ~ .menu-item:nth-child(6) {

  transition-duration: 400ms;

  -webkit-transform: translate3d(-77.04956px, 85.37192px, 0);

          transform: translate3d(-77.04956px, 85.37192px, 0);

}

.menu-open:checked ~ .menu-item:nth-child(7) {

  transition-duration: 480ms;

  -webkit-transform: translate3d(-114.40705px, 11.66307px, 0);

          transform: translate3d(-114.40705px, 11.66307px, 0);

}

Output:

Fruxinfo Pvt. Ltd.