css hamburger menu animation like apple

gistfile1.txt

.mobile-nav {
  --width: 28px;
  --height: 12px;
  --border: 2px;
  position: relative;
  margin-left: auto;
  cursor: pointer;
  width: 40px;
  height: 40px;
  color: #000;

  .size {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--width);
    height: var(--height);
  }

  .top,
  .bottom {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    transition: transform 0.2s;

    &:before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      height: 2px;
      background-color: currentColor;
      border-radius: var(--border);
      transition: 0.2s;
    }
  }

  .top {
    transform-origin: center bottom;
    &:before {
      top: 0;
    }
  }

  .bottom {
    transform-origin: center top;
    top: 50%;
    &:before {
      bottom: 0;
    }
  }

  &.open {
    color: #fff;

    .top {
      transform: rotate(45deg);
      &:before {
        top: calc(100% - var(--border) / 2);
      }
    }

    .bottom {
      transform: rotate(-45deg);
      &:before {
        bottom: calc(100% - var(--border) / 2);
      }
    }
  }
}