html - 我需要用悬停动画汉堡菜单

Question

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

（我已经有一个动画，当它被点击时）

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

标签： htmlcssanimationhover