Hamburger Animated Icon

Hamburger Animated Icon.markdown

Hamburger Animated Icon

Just a little hamburger button ~ :3

Design by Creativedash https://dribbble.com/shots/1623679-Open-Close

A Pen by Kyosuke on CodePen.

License.

index.html

button.ham
  span.bar
  span.bar
  span.bar

script.js

$('button').on('click', function() {
  var $btn = $(this);
  if ($btn.hasClass('closed') || !$btn.hasClass('opened')) {
    $btn.removeClass('closed');
    setTimeout(function() {
      // Little hack in order to restart CSS animations ...
      $btn.addClass('opened');
    }, 1);
  } else if ($btn.hasClass('opened')) {
    $btn.removeClass('opened');
    setTimeout(function() {
      // Little hack in order to restart CSS animations ...
      $btn.addClass('closed');
    }, 1);
  }
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

// DOCUMENT

*
  box-sizing: border-box

html, body
  background: #31AA39
  height: 100%

body
  display: flex
  justify-content: center
  align-items: center
  
// .HAM

.ham
  display: block
  background: none
  position: relative
  min-width: 150px
  min-height: 150px
  padding: 0
  border: 0
  border-radius: 100%
  outline: none
  cursor: pointer
  transition: all 250ms
  
  &:before
    content: ''
    position: absolute
    top: -9px
    left: -9px
    width: 100%
    height: 100%
    border: 9px solid #fff
    border-radius: 100%
    clip-path: polygon(100% 50%, 100% 50%, 100% 50%, 100% 50%, 50% 50%)
  
  > .bar
    display: block
    background: #fff
    position: absolute
    left: 22px
    width: 70%
    height: 10px
    border-radius: 6px
    transition: all 350ms
    
    &:first-child
      top: 25%
      transition-delay: 400ms
      transform-origin: top right
    
    &:nth-child(2)
      top: 47%
      transition-delay: 300ms
    
    &:last-child
      bottom: 25%
      transition-delay: 400ms
      transform-origin: bottom right

// .HAM.OPENED

.ham.opened
  
  &:before 
    animation: open-close 400ms 300ms forwards ease-in
  
  &:active
    transform: scale(.85)
  
  > .bar
    transition-delay: 0ms
    
    &:first-child
    left: 5px
    transform: rotate(-44deg)
   
    &:nth-child(2)
      left: 150px
      width: 0%
    
    &:last-child
      bottom: 22%
      left: 5px
      transform: rotate(44deg)

// .HAM.CLOSED

.ham.closed
  
  &:before
    animation: open-close 400ms forwards reverse ease-out
  
// OPEN-CLOSE ANIMATION

@keyframes open-close
  0%
    clip-path: polygon(100% 50%, 100% 50%, 100% 50%, 100% 50%, 50% 50%)
  25%
    clip-path: polygon(100% 50%, 100% 0%, 50% 0%, 50% 0%, 50% 0%)
  50%
    clip-path: polygon(100% 50%, 100% 0%, 0% 0%, 0% 50%, 50% 50%)
  75%
    clip-path: polygon(100% 50%, 100% 0%, 0% 0%, 0% 100%, 50% 100%)
  100%
    clip-path: polygon(100% 50%, 100% 0%, 0% 0%, 0% 100%, 100% 100%)