css - 使用 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 fiddle

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

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

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

Answer 1

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

$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;
	});
});

#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;
}

<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>