kebab animation

kebab.html

<button class="kebab-wrap" type="button">
  <span class="kebab"></span>
</button>

<script type="text/javascript">
  var btn = document.querySelector('.kebab-wrap');
  var kebab = btn.querySelector('.kebab');
  btn.addEventListener('click', function(ev) {
    ev.preventDefault();
    kebab.classList.toggle('active');
  });
</script>

kebab.styl

clearbtn()
  appearance none
  margin 0
  padding 0
  border 0
  background none
  font-size inherit
  line-height inherit

  &:focus
    outline none

text-hide()
  font 0/0 a
  color transparent
  text-shadow none
  background-color transparent
  border 0

$kebab()
  $sz = 3px
  $ofs = 3px
  $time = .4s
  $arr_sz = 3 * $sz
  $arr_ofs = 2 * $sz

  position relative

  width $sz
  height $sz
  border-radius $sz

  color $p($font, d)
  background currentColor

  &::before
  &::after
    content ""
    position absolute

    width $sz
    height $sz
    border-radius $sz

    background currentColor
    transform-origin 100% 50%

    left 0


  &::before
    top (- $ofs - $sz)
    transform-origin 100% 100%

  &::after
    bottom (- $ofs - $sz)
    transform-origin 100% 0%

  &.active
    animation kebab $time
    animation-fill-mode forwards

  &.active::before
    top 0
    animation kebab-top $time
    animation-fill-mode forwards

  &.active::after
    bottom 0
    animation kebab-bot $time
    animation-fill-mode forwards

  @keyframes kebab {
    0% {
      width $sz
      transform translateX(0)
    }

    33.33% {
      width $sz
      transform translateX(0)
    }

    66.66% {
      width ($arr_ofs + $arr_sz)
      transform translateX(- $arr_ofs)
    }

    100% {
      width ($arr_ofs + $arr_sz)
      transform translateX(- $arr_ofs)
    }
  }

  @keyframes kebab-top {

    0% {
      top (- $ofs - $sz)
    }

    33.33% {
      top 0
      width $sz
      left 0
    }

    66.66% {
      top 0
      left $arr_ofs
      width $arr_sz
      transform rotate(0)
    }

    100% {
      top 0
      left $arr_ofs
      width $arr_sz
      transform rotate(45deg)
    }
  }

  @keyframes kebab-bot {

    0% {
      bottom (- $ofs - $sz)
    }

    33.33% {
      bottom 0
      width $sz
      left 0
    }

    66.66% {
      bottom 0
      left $arr_ofs
      width $arr_sz
      transform rotate(0)
    }

    100% {
      bottom 0
      left $arr_ofs
      width $arr_sz
      transform rotate(-45deg)
    }
  }

.kebab-wrap
  clearbtn()
  text-hide()
  width 60px
  height 60px
  position relative
  border 1px solid #fafafa

.kebab
  $kebab()
  position absolute
  top 50%
  margin-top -1px