Как перевернуть ключевой кадр?

Я попытался создать адаптивное веб-приложение, которое на мобильных устройствах выглядит следующим образом:

При нажатии на строку меню он преобразуется в:

Стиль написан на SCSS и выглядит следующим образом:

.topbar-menu {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;

  .topbar-navi-menu {
    margin-left: 15px;
    height: 30px;
    width: 40px;
    display: block;
    cursor: pointer;
    position: relative;

    i {
      position: absolute;
      height: 5px;
      width: 100%;
      background-color: #ffffff;

      &.topbar-animate-forward {
        &:first-child {
          animation: topbar-first-bulk 500ms forwards;
        }

        &:nth-child(2) {
          animation: topbar-middle-bulk 500ms forwards;
        }

        &:last-child {
          animation: topbar-last-bulk 500ms forwards;
        }
      }

      &:first-child {
        top: 0;
      }

      &:nth-child(2) {
        top: 50%;
        transform: translateY(-50%);
      }

      &:last-child {
        bottom: 0;
      }
    }

    @keyframes topbar-first-bulk {
      0% {
        top: 0;
        transform: translateY(0%) rotate(0deg);
      }

      25% {
        top: 50%;
        transform: translateY(-50%) rotate(0deg);
      }

      50% {
        top: 50%;
        transform: translateY(-50%) rotate(-45deg);
      }

      100% {
        top: 50%;
        transform: translateY(-50%) rotate(-45deg);
      }
    }

    @keyframes topbar-middle-bulk {
      0% {
        top: 50%;
        transform: translateY(-50%) rotate(0deg);
      }

      25% {
        top: 50%;
        transform: translateY(-50%) rotate(0deg);
      }

      50% {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
      }

      100% {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
      }
    }

    @keyframes topbar-last-bulk {
      0% {
        bottom: 0;
        transform: translateY(0%) rotate(0deg);
      }

      25% {
        bottom: 50%;
        transform: translateY(50%) rotate(0deg);
      }

      50% {
        bottom: 50%;
        transform: translateY(50%) rotate(-45deg);
      }

      100% {
        bottom: 50%;
        transform: translateY(50%) rotate(-45deg);
      }
    }
  }
}

Я использую причина реагировать, это похоже на reactjs. Структура JSX:

<div className = "topbar-container">
  <section className = "topbar-menu">
    <a
      onClick = {
        _evt => self.send(MobileMenuToggler(self.state.showMobileMenu))
      }
      className = "topbar-navi-menu">
      <i className = {self.state.mobileMenuAnimate} />
      <i className = {self.state.mobileMenuAnimate} />
      <i className = {self.state.mobileMenuAnimate} />
    </a>
  </section>
</div>

Как вернуть анимацию в строку меню с помощью CSS?