Just Another Hamburger

index.html

<div class="container">
  <div class="menu">
    <div class="line top"></div>
    <div class="line middle"></div>
    <div class="line bottom"></div>
  </div>
  
  <span class="text">
    <p>Original shot by <a href="https://dribbble.com/shots/2761273-simple-hamburger-menu-animation" target="_blank">PrimeModule Studio</a></p>
  </span>
</div>

Just Another Hamburger.markdown

Just Another Hamburger

A pure CSS version of the hamburger menu animation designed by PrimeModule Studio (https://dribbble.com/shots/2761273-simple-hamburger-menu-animation).

A Pen by Maya Shankar on CodePen.

License.

script.js

// None at all.

style.css

@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,300italic);
@import url(https://fonts.googleapis.com/css?family=Quicksand);


.container {
  height: 200px;
  width: 200px;
  margin: 0 auto;
  margin-top: calc(50vh - 100px);
}

.menu {
  height: 100px;
  width: 100px;
  margin: 0 auto;
  margin-top: 50px;
}

.line {
  background: #662d91;
  margin: 7px;
  height: 15px;
  width: 70px;
  margin-left: 15px;
  border-radius: 4px;
}

@-webkit-keyframes left {
  0% { transform: rotate(0); }
  25% { transform: rotate(0); }
  75% { transform: rotate(-45deg) translate(-20px,-10px); }
  100% { transform: rotate(-45deg) translate(-20px,-10px); }
}

@-webkit-keyframes mid {
  0% { transform: rotate(0); }
  25% { transform: rotate(0); }
  75% { transform: rotate(-90deg) translate(-3px, 0); }
  100% { transform: rotate(-90deg) translate(-3px, 0); }
}

@-webkit-keyframes right {
  0% { transform: rotate(0); }
  25% { transform: rotate(0); }
  75% { transform: rotate(45deg) translate(-11px, -40px); }
  100% { transform: rotate(45deg) translate(-11px, -40px); }
}

@keyframes left {
  0% { transform: rotate(0); }
  25% { transform: rotate(0); }
  75% { transform: rotate(-45deg) translate(-22px,-10px); }
  100% { transform: rotate(-45deg) translate(-22px,-10px); }
}

@keyframes mid {
  0% { transform: rotate(0); }
  25% { transform: rotate(0); }
  75% { transform: rotate(-90deg) translate(3px, -1px); }
  100% { transform: rotate(-90deg) translate(3px, -1px); }
}

@keyframes right {
  0% { transform: rotate(0); }
  25% { transform: rotate(0); }
  75% { transform: rotate(45deg) translate(-14px, -40px); }
  100% { transform: rotate(45deg) translate(-14px, -40px); }
}

@-moz-keyframes left {
  0% { transform: rotate(0); }
  25% { transform: rotate(0); }
  75% { transform: rotate(-45deg) translate(-20px,-10px); }
  100% { transform: rotate(-45deg) translate(-20px,-10px); }
}

@-moz-keyframes mid {
  0% { transform: rotate(0); }
  25% { transform: rotate(0); }
  75% { transform: rotate(-90deg) translate(-3px, 0); }
  100% { transform: rotate(-90deg) translate(-3px, 0); }
}

@-moz-keyframes right {
  0% { transform: rotate(0); }
  25% { transform: rotate(0); }
  75% { transform: rotate(45deg) translate(-11px, -40px); }
  100% { transform: rotate(45deg) translate(-11px, -40px); }
}

.top {
  margin-top: 21px;
  -webkit-animation: left 2s infinite alternate ease-in-out;
     -moz-animation: left 2s infinite alternate ease-in-out;
          animation: left 2s infinite alternate ease-in-out;
}

.middle {
  -webkit-animation: mid 2s infinite alternate ease-in-out;
     -moz-animation: mid 2s infinite alternate ease-in-out;
          animation: mid 2s infinite alternate ease-in-out;  
}

.bottom {
  -webkit-animation: right 2s infinite alternate ease-in-out;
     -moz-animation: right 2s infinite alternate ease-in-out;
          animation: right 2s infinite alternate ease-in-out;
}

.container .text p {
  font-family: 'Lato', 'Quicksand', sans-serif;
  font-weight: 300;
  text-align: center;
  color: grey;
}

a {
  text-decoration: none;
  color: inherit;
}
a:hover {
  color: black;
}