Checkbox取消选中时如何反向关键帧动画？纯CSS实现箭头转回汉堡菜单

我正在练习提升CSS能力，仅使用HTML和CSS开发移动端汉堡菜单转极简箭头的动画效果，通过@keyframes定义动画、Checkbox控件触发状态切换。目前已实现Checkbox选中状态时汉堡菜单转为箭头的动画，但无法实现取消Checkbox选中时箭头转回汉堡菜单的反向动画。

现有代码 #

HTML代码

<div class="burger-btn-body">
  <input type="checkbox" class="burger-input" id="burger-input">
  <label for="burger-input" class="burger-label">
    <div class="container">
      <div class="bar">
        <div class="bar-child" id="bar-child1"></div>
      </div>
      <div class="bar">
        <div class="bar-child" id="bar-child2"></div>
      </div>
      <div class="bar">
        <div class="bar-child" id="bar-child3"></div>
      </div>
    </div>
  </label>
</div>

CSS代码

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}

.container {
  margin-top: 10px;
  margin-left: 10px;
  width: 660px;
  height: 660px;
  background: black;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.burger-input {
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  display: none;
}

.bar {
  height: 33.333%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-self: center;
  align-self: center;
  justify-content: center;
}

.bar-child {
  background-color: aqua;
  align-self: center;
  width: 90%;
  height: 55%;
}

.burger-input:checked+.burger-label .bar-child {
  transition: border-radius 0.4s ease-in-out 0.4s;
  border-radius: 250px;
}

.burger-input:checked+.burger-label .bar:nth-child(1) {
  align-self: end;
  animation: width20 0.4s ease-in 0s 1 normal forwards, centerBurger 0.4s linear 0.4s 1 normal forwards;
}

.burger-input:checked+.burger-label .bar:nth-child(2) {
  align-self: start;
  animation: width20 0.4s ease-in 0s 1 normal forwards, leftArrowHead 0.4s ease-in-out 0.8s 1 normal forwards;
}

.burger-input:checked+.burger-label .bar:nth-child(3) {
  align-self: end;
  animation: width20 0.4s ease-in 0s 1 normal forwards, moveBurgerUp 0.4s linear 0.4s 1 normal forwards, rightArrowHead 0.4s ease-in-out 0.8s 1 normal forwards;
}

@keyframes leftArrowHead {
  0% {
    transform: rotate(-30deg);
  }
  100% {
    transform: translateY(-46%) rotate(-50deg);
    width: 70%;
  }
}

@keyframes rightArrowHead {
  0% {
    transform: translateY(-100%) rotate(30deg);
  }
  100% {
    transform: translateY(-146%) rotate(50deg);
    width: 70%;
  }
}

@keyframes moveBurgerUp {
  from {}
  to {
    transform: translateY(-100%);
  }
}

@keyframes centerBurger {
  from {}
  to {
    transform: translateX(calc(-330px + 50%));
  }
}

@keyframes width20 {
  from {
    width: 90%;
  }
  to {
    width: 20%;
  }
}

已尝试的解决方案（均无效） #

1. 直接对原有动画应用reverse属性：

.burger-input:not(:checked) + .burger-label .bar:nth-child(2) {
     align-self: start;     
     animation: 
     width20 0.4s ease-in 0.8s 1 normal reverse,
     leftArrowHead 0.4s ease-in-out 0s 1 normal reverse;   
}

2. 为取消选中状态添加transition：

.burger-input:not(:checked) + .burger-label .bar:nth-child(1) {
     align-self: end;
     transition: transform 0.4s linear 0s;     
     transform: translateX(calc(330px - 50%));   
}

3. 为回退模式创建自定义反向动画：

.burger-input:not(:checked) + .burger-label .bar:nth-child(1) {
    align-self: end;
    animation:
    width20 0.4s ease-in 0.4s 1 normal reverse,
    centerBurgerReverse 0.4s linear 0s 1 normal forwards;
}

@keyframes centerBurgerReverse {
    from{

    }
    to{
      transform: translateX(calc(330px - 50%));
    }

}

疑问 #

纯CSS是否能实现该双向动画效果？必要时可改用SCSS，但希望不使用JavaScript，避免违背本次练习的初衷。

内容的提问来源于stack exchange，提问作者Garry