Пример анимированной кнопки меню (гамбургера) на CSS и JQuery

html

<div id="nav-icon">
		<span></span>
		<span></span>
		<span></span>
</div>

Jquery

$('#nav-icon').click(function(){
  $(this).toggleClass('open');
});

SASS

#nav-icon
  width: 60px
  height: 45px
  position: relative
  margin: 50px auto
  -webkit-transform: rotate(0deg)
  -moz-transform: rotate(0deg)
  -o-transform: rotate(0deg)
  transform: rotate(0deg)
  -webkit-transition: .5s ease-in-out
  -moz-transition: .5s ease-in-out
  -o-transition: .5s ease-in-out
  transition: .5s ease-in-out
  cursor: pointer

#nav-icon span
  display: block
  position: absolute
  height: 9px
  width: 100%
  background: #d3531a
  border-radius: 9px
  opacity: 1
  left: 0
  -webkit-transform: rotate(0deg)
  -moz-transform: rotate(0deg)
  -o-transform: rotate(0deg)
  transform: rotate(0deg)
  -webkit-transition: .25s ease-in-out
  -moz-transition: .25s ease-in-out
  -o-transition: .25s ease-in-out
  transition: .25s ease-in-out

#nav-icon
  span
    &:nth-child(1)
      top: 0px
    &:nth-child(2)
      top: 18px
    &:nth-child(3)
      top: 36px
  &.open span
    &:nth-child(1)
      top: 18px
      -webkit-transform: rotate(135deg)
      -moz-transform: rotate(135deg)
      -o-transform: rotate(135deg)
      transform: rotate(135deg)
    &:nth-child(2)
      opacity: 0
      left: -60px
    &:nth-child(3)
      top: 18px
      -webkit-transform: rotate(-135deg)
      -moz-transform: rotate(-135deg)
      -o-transform: rotate(-135deg)
      transform: rotate(-135deg)

Так же этот код доступен по ссылке https://codepen.io/PaFF/pen/gpKBdv
Кому как удобно. Только там 4 примера