[Burger menu] Burger menu with open/close animation #navigation

_navigation-icon.scss

$icon_color: $c_prim;
$icon_easing: ease-in-out;
$icon_easing_duration: 200ms;

#navigation-toggle {
    height: 30px;
    padding: 5px 0 !important;
	cursor: pointer;

	div,
	div:after,
	div:before {
		width: 30px;
		height: 3px;
	}

	div {
		position: relative;
		transform: translateY(7px);
		background: $icon_color;
		transition: all 0ms $icon_easing_duration;

		&:after,
		&:before {
			content: '';
			position: absolute;
			left: 0;
			background: $icon_color;
		}

		&:before {
			bottom: 8px;
			transition: bottom $icon_easing_duration $icon_easing_duration $icon_easing, transform $icon_easing_duration $icon_easing;
		}

		&:after {
			top: 8px;
			transition: top $icon_easing_duration $icon_easing_duration $icon_easing, transform $icon_easing_duration $icon_easing;
		}
	}

	&.open {
		div {
			background: rgba(255, 255, 255, 0); 

			&:after {
				top: 0;
				transform: rotate(45deg);
				transition: top $icon_easing_duration $icon_easing, transform $icon_easing_duration $icon_easing_duration $icon_easing;
			}

			&:before {
				bottom: 0;
				transform: rotate(-45deg);
				transition: bottom $icon_easing_duration $icon_easing, transform $icon_easing_duration $icon_easing_duration $icon_easing;
			}
		}
	}
}

navigation-icon.html

<div id="navigation-toggle">
  <div></div>
</div>