'How I can turn my burger menu into a cross?

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);
  }
}
javascripthtmlcssanimationfrontend


Solution 1:[1]

   $('.btn').click(function () {
            $(this).toggleClass("click");
        });
    .btn {
        position: absolute;
        top: 15px;
        left: 45px;
        height: 45px;
        width: 45px;
        text-align: center;
        background: #1b1b1b;
        border-radius: 3px;
        cursor: pointer;

    }

    .btn span {
        color: white;
        font-size: 28px;
        line-height: 45px;
    }

    .btn.click span:before {
        content: '\f00d';
        /* cross icon */
    }
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
</head>


<body>
    <div class="btn">
        <span class="fas fa-bars"></span>
    </div>


</body>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Abhishek

Related Questions