Animated Hamburger Demo

HTML

<div class="js-target animated-hamburger">
  <span></span>
  <span></span>
  <span></span>
</div>

<div class="js-target animated-hamburger-2">
  <span></span>
  <span></span>
  <span></span>
</div>

<div class="js-target animated-hamburger-3">
  <span></span>
  <span></span>
  <span></span>
</div>

SCSS

@mixin createHamburger($width: 30px, $height: 25px, $barHeight: 5px, $barColor: black, $duration: .4s, $rotation: 90deg) {
	width: $width;
	height: $height;
	position: relative;
	transition: $duration ease all;
	span {
		position: absolute;
		left: 0;
		display: block;
		width: $width;
		height: $barHeight;
		background-color: $barColor;
		opacity: 1;
		&:nth-child(1) {top: 0;}
		&:nth-child(2) {top: 50%; margin-top: -($barHeight/2);}
		&:nth-child(3) {bottom: 0;}

		transition: $duration/2 $duration/2 ease top,
					$duration/2 $duration/2 ease bottom,
					0s $duration/2 ease opacity,
					$duration/2 ease transform;
	}
	&.active {
		transform: rotate($rotation);
		span {
			transition: $duration/2 ease top,
			      $duration/2 ease bottom,
			      0s $duration/2 ease opacity,
			      $duration/2 ease $duration/2 transform;
		}
		span:nth-child(1) {
			transform: rotate(45deg);
			top: ($height/2) - ($barHeight/2);
		}
		span:nth-child(2) {
			opacity: 0;
		}
		span:nth-child(3) {
			transform: rotate(-45deg);
			bottom: ($height/2) - ($barHeight/2);
		}
	}
}

body {
	padding: 100px 0;
  text-align: center;
  height: 300px;
}

.hamburger {
    display: inline-block;
    margin-left: 24px;
    &:first-child {
      margin-left: 0;
    }
  	&:hover {
      cursor: pointer;
    }
 }

.animated-hamburger {
	@extend .hamburger;
  @include createHamburger();
}

.animated-hamburger-2 {
	@extend .hamburger;
  @include createHamburger(60px, 40px, 10px, #0066ff, 1s, 180deg);
}

.animated-hamburger-3 {
	@extend .hamburger;
  @include createHamburger(20px, 15px, 2px, #e066ff, .5s, -360deg);
}

JavaScript

$('.js-target').click(function() {
	$(this).toggleClass('active');
});