使用CSS创建汉堡菜单动画

Question

您好我刚刚创建了这个汉堡菜单但是一旦点击我需要折叠菜单然后创建一个X.我的动画正确如下所示：

    .burger-menu-container {
  position: absolute;
  top: 25px;
  right: 30px;
  margin: auto;
  width: 35px;
  height: 25px;
  cursor: pointer;
  z-index: 1002;
  .burger-menu {
    position: relative;
    top: 10px;
    width: 35px;
    height: 2px;
    background: $black;
    &:before {
      content: "";
      position: absolute;
      left: 0;
      bottom: 9px;
      height: 2px;
      width: 35px;
      background: $black;

    }
    &:after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -9px;
      height: 2px;
      width: 35px;
      background: $black;
    }
  }
  .burger-menu-active {
    position: absolute;
    top: 10px;
    height: 2px;
    width: 35px;
    background: $black;
    transition: all 0ms 300ms;
    &:before {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      height: 2px;
      width: 35px;
      background: $black;
      //transform: rotate(-45deg);
      //transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
      transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);

    }
    &:after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      height: 2px;
      width: 35px;
      background: $black;
      animation: BurgerMenuBottomActive 4s;
    }
  }
}

  @keyframes BurgerMenuBottomActive {
0% {bottom: -9px;}
50% {transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);}
100% {transform: rotate(45deg);transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);} 

}

参见Semi Broke小提琴

https://jsfiddle.net/zqdhy6sh/3/

我遇到的问题是Keyframes动画几乎同时发生，我添加了更多步骤并且没有做任何改变，它在靠近直线时旋转。

有没有人知道如何分步进行。我知道关键帧应该是步骤，但它不能正常工作

Answer 1

看看这个https://jsfiddle.net/jfyzg7jj/14/

＆＃13;

＆＃13;

$navToggle = $("#navToggle");

/**
 * Open Nav if(!hasClass['active'])
 * else close Nav
 */
function toggleNav() {
	if (!$navToggle.hasClass('active')) $navToggle.addClass('active');
	else $navToggle.removeClass('active');
    return false;
}

$(document).ready(function () {
	$navToggle.click(function () {
		toggleNav();
		return false;
	});
});

＆＃13;

#navToggle {
  position: relative;
  left: 100%;
  transform: translateX(-100%);
  width: 35px;
  height: 25px;
  cursor: pointer;
}
#navToggle span {
  top: 10px;
  transition: all 50ms ease-out;
}
#navToggle span:before, #navToggle span:after {
  transition: all 250ms ease-out;
}
#navToggle span:before {
  top: -10px;
}
#navToggle span:after {
  bottom: -10px;
}
#navToggle span,
#navToggle span:before,
#navToggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 3px;
  width: 35px;
  background: #333;
  position: absolute;
  display: block;
  content: '';
}
#navToggle.active span {
  background-color: transparent;
}
#navToggle.active span:before, #navToggle.active span:after {
  top: 0;
}
#navToggle.active span:before {
  transform: rotate(45deg);
  background-color: #333;
}
#navToggle.active span:after {
  transform: rotate(-45deg);
  background-color: #333;
}

＆＃13;

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<div id="app">
  <div id="navToggle" class="">
    <span></span>
 </div>
</div>

＆＃13;

＆＃13;

＆＃13;