Hamburger Menü Animation

      .nav-menu {
        width: 50px;
        height: 50px;
        position: relative;
        cursor: pointer;
      }
      .nav-menu span {
          transform: rotate(0deg);
          transition: transform 0.5s ease, top 0.5s ease;
          width: 50px;
          position: absolute;
          height: 10px;
          background-color: #000;
          border-radius: 5px;
          left: 0;
      }
      .nav-menu span:nth-child(1) {
          top: 10px;
      }
      .nav-menu span:nth-child(2) {
          top: 30px;
      }
      .nav-menu:hover span:nth-child(1) {
          transform: rotate(45deg);
          top: 20px;
      }
      .nav-menu:hover span:nth-child(2) {
          transform: rotate(-45deg);
          top: 20px;
      }

<div class="nav-menu"><span></span><span></span></div>