我需要用悬停动画制作汉堡菜单

Question

当我的汉堡菜单上有一个悬停时，我正在尝试制作动画，我希望线条向右“滑动”并在每条线上稍有延迟地消失，然后从左侧返回。 / p>

（点击时我已经有了动画）

.toggle-button {
  width: 60px;
  height: 45px;
  top: 50%;
  left: 45px;
  position: fixed;
  cursor: pointer;
  outline: none;
}

.toggle-button span {
  display: block;
  position: absolute;
  height: 1px;
  width: 100%;
  background: black;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: .5s ease-in-out;
}

<nav class="navbar">
  <img src="Images/logo.svg" class="svg">
  <div class="hamburger_wrapper">
    <div class="toggle-button">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>