I would like that when we click on my menu it turns into a cross, I do not understand why it does not work. What would be nice is to be able to launch an animation when another one ends in css

The goal of the animation is that the top and bottom spans disappear and the two small spans in the middle grow and turn 45 degrees.

Thanks for your help, here is my code on codepen below

https://codepen.io/JulienMtau/pen/abOBREK

.icon-menu {
  cursor: pointer;
  width: 30px;
  height: 24px;
  position: relative;

  & > span:first-child {
    transition: width 0.2s;
    position: absolute;
    top: 50%;
    background: black;
    width: 40%;
    height: 1px;
  }

  & > span:last-child {
    transition: width 0.2s, transform 0.2s;
    position: absolute;
    top: 50%;
    transform: translateX(150%);
    background: black;
    width: 40%;
    height: 1px;
  }

  & > span:nth-of-type(2) {
    transition: width 0.2s, margin-left 0.2s;
    position: absolute;
    top: 50%;
    width: 100%;

    &::before,
    &::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 1px;
      background: black;
    }

    &::before {
      transform: translateY(-7px);
    }
    &::after {
      transform: translateY(7px);
    }
  }

  .active:first-of-type {
    animation: burgerToCrossForFirst 1s;
  }

  .active:nth-of-type(2) {
    transition: width 0.2s, margin-left 0.2s;
    width: 0%;
    margin-left: 50%;
  }

  .active:last-of-type {
    animation: burgerToCrossForLast 0.2s;
  }
}

@keyframes burgerToCrossForFirst {
  0% {
    width: 50%;
  }

  50% {
    width: 100%;
  }

  100% {
    transform: rotate(45deg);
  }
}

@keyframes burgerToCrossForLast {
  0% {
    width: 50%;
    transform: translateX(100%);
  }

  50% {
    width: 100%;
    transform: translateX(0%);
  }

  100% {
    transform: translateX(0%) rotate(-45deg);
  }
}